Try ShortPoint nowThis article will demonstrate how to customize the Image Carousel Design Element and discuss the OOTB options you can modify.
TABLE OF CONTENTS
Prerequisite
- You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You are a ShortPoint Designer with an active license.
Interactive Tutorial
Click Get Started to learn how to customize the Image Carousel Design Element:
NOTECheck out Image Carousel Features to learn more about the OOTB options you can customize.
Step-by-step Tutorial
Follow the steps below for a detailed guide on how to customize the Image Carousel Design Element:
Step 1: Edit the ShortPoint Web Part
- Go to the SharePoint page you want to use and click Edit.
- Click the ShortPoint tag.
- Select the pencil icon.
Step 2:Insert the Image Carousel Design Element
- Click the plus icon.
- Use the search box to look for Image Carousel and click it.
Step 3: Edit the content
- Click the cogwheel icon of the first item to edit its content.
- Click the folder icon and select the image you want to display.
- Add a Title.
- (Optional) Add a Tooltip text.
- Add a Link.
- Click the back icon.
- Repeat the same steps for the other items.
- (Optional) If you want to add another item, click Add New and repeat the steps above to edit its content.
NOTEYou can also create dynamic content using the ShortPoint Connect feature. To learn more about it, check out ShortPoint Connect: Basic Tutorial.
Step 4: Customize the Image Carousel’s design
- Navigate to the Design tab.
- Customize the look of the Image Carousel according to your preference.
- Once satisfied, click the green check mark.
NOTECheck out Image Carousel Features to learn more about the OOTB options you can customize.
Step 5: Save
- Then, click the eye icon to see your page in real-time.
- Click Save to apply all your changes.
Image Carousel Features
Below are the options you can find in the Image Carousel Settings window:
A. Items tab
The Items tab allows you to duplicate, delete, configure content, and add new items. It has the following options:
ITEMS ACTION ICONS
 | Cogwheel | opens a new window that allows you to edit the content of each item. See the table below for the cogwheel icon settings. |
 | Duplicate | duplicates the item selected. |
 | Trash | deletes the item selected. |
 | Add New | adds a new item. |
 | Drag and Drop | allows you to re-arrange the position of the item. |
COGWHEEL ICON SETTINGS (CONTENT TAB)
 | Image | allows you to choose the image you want to showcase. You can add images using two options: (1) the folder icon, which will redirect you to your SharePoint contents library, or (2) the Image field, which allows you to paste the URL of the image you want to use. |
 | Title | allows you to add item title. |
 | Description | allows you to add a description. |
 | Tooltip | allows you to add a description to the items whenever a user hovers over it. |
 | Link | allows you to add a link where users will be redirected when they click an item. |
B. Design tab
The Design tab allows you to customize the look of the Image Carousel Design Element. It has the following options:
SLIDER SETTINGS
 | Max images to show | allows you to modify the maximum number of images to show per slide. By default, it is set to three images. |
 | Autoplay | when enabled, slides will automatically play. |
 | Loop speed | allows you to control the speed of the Autoplay. |
 | Infinite | when enabled, infinite scrolling will be allowed. |
 | Responsive | when enabled, this option will automatically change the number of images shown in each slide based on the size of the screen. |
STYLES
 | Hover Style | allows you to customize how the Image Carousel will look whenever a user hovers over it. |
 | Text Size | allows you to modify the text size of the Image Carousel. |
 | Text Color | allows you to change the color of the text. |
 | Horizontal Alignment | allows you to change the horizontal alignment of the Image Carousel. You can choose from Left, Center, or Right. |
 | Show Border | when enabled, this will add a border to the Image Carousel. |
 | Border Color | this option will only appear when Border Color is enabled. This allows you to change the color of the border. |
BACKGROUND COLOR
 | Color | allows you to modify the background color of the Image Carousel. |
 | Color Transparency | allows you to customize the color transparency of the background color. |
SIZE
 | Height | allows you to customize the height of the Image Carousel. |
 | Width | allows you to modify the width of the Image Carousel. |
PERFORMANCE
 | Lazy Load Images | when enabled, only necessary images will be loaded at page load, the rest will be loaded once the user navigates to them. |
IMAGE SETTINGS
 | Image Placement | allows you to choose how the images will be shown. You have the following options:
|
 | Enable Advanced Image Settings | when enabled, advanced image settings will appear. |
 | Image Horizontal Position | allows you to choose the horizontal position of the image. You can choose from Left, Center, or Right. |
 | Image Vertical Position | allows you to choose the vertical position of the image. You can choose from Top, Center, or Bottom. |
 | Image Repeat | allows you to repeat the image. You can choose from Repeat, Don’t Repeat, Repeat Horizontally, or Repeat Vertically. |
C. Custom CSS Tab
This tab allows you to use your own CSS, HTML, and Javascript code to customize the Image Carousel Design Element.
NOTECheck out our support article on How to Insert Custom CSS into a ShortPoint Design Element (Basic Tutorial) to know more about Custom CSS.
NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.That’s it! You can now effectively use the Image Carousel Design Element on your SharePoint pages.
Related articles:
