An image carousel is essentially an automated slideshow of images, adding a dynamic graphical display to your website. To add one, drag the Image Carousel component to a page of your site. Next, click on it to open the component options panel on the side of the editor.
Images
The first section in the option panel handles all the images in the carousel. To add images, click on the Upload Images button. Each image in the carousel has options of its own, too. Click on an image in the list and you’ll the following options:
- Image - Click on this to upload a different image.
- Link - Use this option if you’d like the image to link to a different page or website.
- Alt Text - Any text added to this field will be used as the ALT text of the image.
- Caption - The text you add to this field will be shown as a caption for the image.
In addition to editing options for each image, you can move one to a new position by clicking on the three vertical dots on the left of an image in the list and dragging. You can also delete an image by clicking on the red X found on each image.
Carousel
The options within this group control how the carousel functions.
- Autoplay - With this toggled on, the carousel will automatically switch between showing each image.
- Show Controls - When this option is toggled on, buttons are shown on the carousel so visitors can switch between images. These buttons only show when hovering over the component.
- Show Thumbnails - Toggle this option on to show small thumbnails for each image. If a visitor clicks on one it will automatically show that image.
Size
The height option found in this group affects the overall size of the component and images within it. Choose a smaller option and the component and images will be smaller; choose larger and the reverse will happen.
Design
This group of options controls the styling of the component.
- Resize Style - Depending on the size of an image, it may need to be cropped or shrunk to fit within the carousel. You can choose either of those two options to control how larger images are handled.
- Shape - By default this uses the shape setting in your site settings, but you can override the shape of images with this option. To set this separately for different screen sizes, click on the desktop/mobile icon.
- Border - Use this option to control the border around images, including the width, color, and style.
Filters
Similar to the [image component], filters can be used to apply an image effect to all of the images within the component. To add one, click on a filter. To remove it, click on the filter again.
Spacing
There are two spacing options found within this group. Both options can be set separately for different screen sizes by clicking on the desktop/mobile icon.
- Margin - Use this option to change the spacing around all elements within the component.
- Padding - Use this option to change the spacing between an image and its border.
Hover
Hover effects are only applied when a visitor moves their mouse over the component. Click on Hover at the top of the options panel to customize the border or filters applied to images in the carousel. If you want to remove a filter on mouseover, toggle the Disable all filters option on.