Image Carousel Element

The Image Carousel Element shows a series of images that the visitor can move through, or that move by themselves. It is a good fit for client logos, product photos, reference projects and any set of images that would take too much room as a grid.

Five layouts are available: a standard carousel with several images side by side, a slider with one image at a time, stacked cards, a three-dimensional coverflow and a marquee that scrolls continuously. Every image can have a title, a caption, a link and a lightbox.

In this article: How To Use · Element Options · Image Options · Tips · Related Elements · Example

How To Use The Image Carousel Element

Add the element to any column and use Bulk Image Upload to add several images at once; each becomes its own item. Choose the Layout. The slider layout takes a Slide Transition Style, coverflow a Slide Rotation Angle and Slide Depth, and the marquee a Marquee Direction. Set Maximum Columns, Column Spacing and Scroll Slides for the layouts that show several images, and turn on Autoplay with an Autoplay Speed if the carousel should move by itself.

Choose the navigation with Show Navigation: arrows, dots, both, or arrows with a progress bar. Arrows and dots have their own size, position, colors and hover colors. Mask Edges fades out the sides, Center Active Slide keeps the current image in the middle, and the border options style every image.

Mouse Scroll lets visitors drag the carousel or move it with the mouse wheel, and Free Mode lets it stop anywhere instead of at the next image. On the Caption tab pick a Caption style; Above and Below keep the text outside the image, the other styles lay it over the image.

Element Options

The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.

Options marked as responsive can be set separately for large, medium and small screens; the screen icon next to the option switches between them.

General

Heading	Description
Content	Enter some content for this image carousel.
Bulk Image Upload	This option allows you to select multiple images at once and they will populate into individual items. It saves time instead of adding one image at a time.
Layout	Choose a carousel layout.
Slide Transition Style	Choose the transition style for the slider layout.
Order By	Defines how items should be ordered. NOTE: This option will not work in the Live Editor.
Picture Size	fixed = width and height will be fixed auto = width and height will adjust to the image.
Hover Type	Select the hover effect type. Hover Type will be disabled when caption styles other than Above or Below are chosen.
Marquee Direction	Select the marquee direction.
Slide Rotation Angle	Set the rotation angle for the slides in coverflow layout.
Slide Depth	Set the z-axis translation offset of the slides in coverflow layout.
Transition Speed	Set the duration of the transition between slides. In milliseconds.
Autoplay	Choose to autoplay the carousel.
Autoplay Speed	Set the autoplay speed, the duration between transitions. In milliseconds.
Autoplay Pause On Hover	Choose to pause autoplay on hover.
Column Alignment	Select the column alignment within rows.
Maximum Columns	Select the number of max columns to display. When using the coverflow layout, the total number of columns will also depend on other settings and available space.
Column Spacing	Insert the spacing between slides without “px”. for example 13.
Scroll Slides	Insert the number of slides to scroll. Leave at 0 to scroll number of visible slides. NOTE: Please make sure that the number of total slides is an even multiple of the number of scrolled slides (2x, 3x, etc.). For larger numbers of scrolled slides, or when using centered slides it is best to have an even larger multiple to ensure smooth looping.
Center Active Slide	Choose to always have the active slide centered. Otherwise it will be left on LTR and right on RTL sites. NOTE: To ensure smooth looping, please make sure that the number of total slides is an even multiple of the number of maximum columns + 1 (e.g. 2n + 1).
Mask Edges	Choose if the edges should be masked with a fade out effect. Navigation arrows will not be displayed, if masked edges are active.
Display Shadow	Choose to show a shadow on the individual slides on coverflow layout or during transitions.
Show Navigation	Choose to show navigation buttons on the carousel. Note: You can also set the CSS ID (e.g. my-id) for this Carousel and use #my-id-next, #my-id-prev as links on a Button element to navigate through the slides.
Arrow Box Dimensions	Controls the width and height of the arrow box. Enter values including any valid CSS unit.
Arrow Icon Size	Set the arrow icon size. Enter value including any valid CSS unit, for example 14px.
Previous Icon	Click an icon to select, click again to deselect.
Next Icon	Click an icon to select, click again to deselect.
Arrow Position	Controls the position of the arrow. Enter value including any valid CSS unit, for example 14px.
Arrow Border Radius	Enter values including any valid CSS unit, for example 10px.
Arrows Styling	Use filters to see specific type of content.
Arrow Background Color	Controls the background color of arrow.
Arrow Color	Controls the color of arrow.
Dots / Progress Bar Position	Controls the position of the dots / progress bar. Enter value including any valid CSS unit, for example 14px.
Progress Bar Size	Set the overall size of the progress bar. In pixels.
Dots Spacing	In pixels.
Dots / Progress Bar Margin	In pixels or percentage, for example 10px or 10%.
Dots Alignment	Controls the border style of the arrow.
Dots / Progress Bar Styling	Use filters to see specific type of content.
Dots Size	In pixels.
Dots / Progress Bar Color	Controls the color of the dots / progress bar background.
Mouse Scroll	Choose to enable mouse drag and/or wheel control control on the carousel. IMPORTANT: For easy draggability, when mouse scroll is activated, links will be disabled.
Free Mode	Choose to enable free mode for dragging and scrolling the images arbitrary amounts.
Border Width	Set the border width of the images. In pixels.
Border Style	Controls the border style of the images.
Border Color	Controls the border color of the images.
Border Radius	Enter values including any valid CSS unit, for example 10px.
Image Lightbox	Show image in lightbox. Lightbox must be enabled in Global Options or the image will open up in the same tab by itself.
Margin	Enter values including any valid CSS unit, for example 4%.
Element Visibility	Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class	Add a class to the wrapping HTML element.
CSS ID	Add an ID to the wrapping HTML element.

Caption

Heading	Description
Caption	Choose the caption style.
Image Title Heading Tag	Choose HTML tag of the image title, either div or the heading tag, h1-h6.
Image Title Typography	Controls the typography of the image title. Leave empty for the global font family.
Image Caption Background Color	Controls the background color of the caption.
Image Caption Typography	Controls the typography of the image caption. Leave empty for the global font family.
Caption Border Color	Controls the color of the caption border.
Image Overlay Color	Controls the color of the image overlay.
Caption Align	Choose how to align the caption.
Caption Area Margin	In pixels or percentage, for example 10px or 10%.

Extras

Heading	Description
Conditional Rendering	Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results.

Image Options

Each image item holds the image, its alt text, an optional title and caption, and its own link and link target. With the lightbox on, a link to another image opens that image in the lightbox.

General

Heading	Description
Image	Upload an image to display.
Image Title	Enter title text to be displayed on image.
Image Caption	Enter caption text to be displayed on image.
Image Link	Add the url the image should link to. If lightbox option is enabled, you can also use this to open a different image in the lightbox.
Link Target	Controls how the link will open.
Image Alt Text	The alt attribute provides alternative information if an image cannot be viewed.

Tips

Fill in Image Alt Text for every image item. For logos, the company name is enough.
When Mouse Scroll is on, the image links are disabled so that dragging works reliably.
For smooth looping, the total number of images should be a multiple of Scroll Slides (2x, 3x and so on). With Center Active Slide or many scrolled slides, add more images for smoother loops.
Navigation arrows are hidden when Mask Edges is on. Use dots or give the carousel a CSS ID and control it with Button Elements linking to #my-id-next and #my-id-prev.
Autoplay moves content without the visitor’s action. Turn on Autoplay Pause On Hover so people can read a caption or click an image.
Order By does not work in the Live Editor; check the order on the published page.

Example

An Image Carousel Element in the Standard layout with four images, two of them visible at a time. Use the arrows or the dots to move one image further, and click an image to open it in the lightbox.