help center

On this page

Carousel widget

Last Update: February 25, 2024

Carousels are a great way to present your visitors with a lot of information while taking up a small amount of real estate. The Carousel widget, allows you to use nested elements to design your own unique carousels. 

Note: The carousel widget is currently an experimental feature and must be activated to use. 

Prerequisite: In order to use the Carousel widget, make sure the following features are active:

  • Flexbox Containers
  • Nested Elements

To create a carousel:

  1. Create a new page or edit an existing page.
    image Carousel widget 1
  2. From the Widgets panel, drag the Carousel widget to the canvas.
    image 1 Carousel widget 3

A carousel containing three horizontal slides is created. Each of these slides has one container.   You can now add elements to these containers to build your own carousel.

Learn how to work with containers

Note: Do not add a carousel inside a carousel as it may affect the functionality.

The advantage of using a  carousel is that it can display a lot of information in a small area. This is done by using multiple slides.

To add more slides to your carousel:

  1. Go to the Content tab.
    image 2 Carousel widget 5
  2. Click Add Item.
    image 3 Carousel widget 7

Content tab – Slides

In the Content tab, expand the Slides section to configure what appears in your carousel’s slides.

carousel 5 Carousel widget 9

Carousel Items

Slides that make up the carousel. 

  • Click the copy icon (The copy icon Carousel widget 11) to copy a slide.
  • Click the delete icon (The delete icon Carousel widget 13) to delete a slide.

Slides on display

Controls the number of slides visible to visitors. 

  • Use the dropdown to determine the number of slides visible. 
  • Keep in mind that the more slides you add, the smaller each slide will be.

+Add Item

Add another slide.

Slides on scroll

Use the dropdown to determine the number of slides that will move when visitors click the navigation icon.

Equal height

Determines whether all slides will be equal in height.

Content tab – Settings

In the Content tab, expand the Settings section to determine the functionality of the slides, such as enabling automatic progression from one slide to another. 

carousel Content tab settings Carousel widget 15

Autoplay

The carousels scrolls automatically while visitors are viewing the page.Toggle Autoplay to turn this feature off.

Scroll Speed

Determines the amount of time slides will appear on screen before autoscrolling. Measured in milliseconds. Hidden if autoplay is turned off.

Pause on hover

Disables autoplay while visitors mouse over the carousel. Hidden if autoplay is turned off.

Pause on interaction

Disables autoplay when visitors click elements in the carousel. Hidden if autoplay is turned off.

Infinite scroll

Turn this toggle off to prevent the carousel from restarting after it reaches the last slide. 

  • Inactive while editing.
  • Only works in preview mode and on a live site.

Transition Duration

The time it takes for one slide to replace another. Measured in milliseconds. 

Note: If you set the direction to row, a slider appears allowing you to adjust the width of the tabs in either PX or %

You can also  adjust the alignment of the text/icon tab title to the right, left or center.

Direction

  • Left: Slide 1 will be the slide located furthest to the left.
  • Right: Slide 1 will be positioned as the slide farthest to the right 

Content tab – Navigation

In the Content tab, expand the Navigation section to configure the settings to determine how visitors can manually navigate through the slides.

carousel Content tab Navigation Carousel widget 17

Arrows

Arrows are the default navigation icon. By clicking the arrows, you manually move to the previous and next slides. 

Toggle the button to disable arrows.

Previous Icon

Previous Arrow Icon– Replace the arrow icon used to view the previous slide:

  • none icon Carousel widget 19 Select not to display an icon 
  • upload svg icon Carousel widget 21 Upload an SVG file to use as an icon. See Enable SVG support
  • Chevron left Carousel widget 23 Choose an icon from the icon library.

Horizontal

Orientation – Place the icon at the start, center or end of the Carousel.

Position

Use the slider to place the navigation icon exactly where you want it. For more details, see Units of measurement.

Vertical

Orientation – Place the icon at the top, center or middle of the Carousel.

Position

Use the slider to place the navigation icon exactly where you want it.

Next Arrow Icon

Replace the arrow icon used to view  the previous slide with:

  • none icon Carousel widget 19 Select not to use an icon
  • upload svg icon Carousel widget 21 Upload an SVG file to use as an icon. See Enable SVG support
  • Chevron right Carousel widget 29 Choose an icon from the icon library.

Horizontal

Orientation – Place the icon at the start, center or end of the Carousel. 

Position

Use the slider to place the navigation icon exactly where you want it.

Content tab – Pagination

In the Content tab, expand the Pagination section to configure how many pages and slides are displayed at a time. For example, a carousel with six slides, set to display three slides at a time, would have two pages. 

carousel Content tab pagination Carousel widget 31

Pagination

Choose how to indicate the page number:

  • a series of dots
  •  a fraction 
  • a progress bar

Alternatively, you can turn the pagination off.

Style tab – Slides

In the Style tab, expand the Slides section to configure how your slides look. 

carousel Style tab slides Carousel widget 33


Gap between slides

Use the slider to adjust the amount of space between slides.

Background Type

Choose the background, for details, see Backgrounds.

Border type

Choose the border, for details, see Border types.

Border Radius

Choose the border radius, for details, see Border radius.

Padding

Add padding, for details, see Padding and margins.

Style tab – Navigation

In the Style tab, expand the Navigation section to configure how the manual navigation icons appear.

carousel Style tab Navigation Carousel widget 35

Size

Use the slider or the counter control to adjust the size of the icons that you use to manually move to the previous and next slides. For more details, see Units of measurement.

Normal/Hover

  • Normal:  determine how the dots will appear by default. 
  • Hover: determine how the navigation  appears when you visitors mouse over them. 

Color

Choose a color: either use the color picker or a global color.

Position

From the menu, determine if the navigation icons appear Inside or Outside the carousel.

Style tab – Pagination

In the Style tab, expand the Pagination section to configure how the pagination appears. It changes depending on what method of pagination you use:

  • Dots
  • Fractions
  • Progress Bar

Dots

Represent the pages in your carousel by using dots positioned below the carousel.

carousel Example of Dots Carousel widget 37
carousel Style tab Pagination dots Carousel widget 39

Size

Use the slider or the counter control to adjust the size of the dots representing the pages. For more details, see Units of measurement.

Normal/Hover

  • Normal: determine how the dots will appear by default.
  • Hover: determine how the dots appear when you mouse over them.

Color

Choose a color: either use the color picker or a global color.

Position

From the menu, select   whether the dots appear Outside or Inside the carousel.Spacing

Spacing

Use the slider or the counter control to adjust the amount of space between the dots and the slides. For more details, see Units of measurement.

Fractions

Represent the pages in your carousel by using a fraction positioned below the carousel. For example, 3/8  indicates page three out of eight pages.

carousel Example of Fractions Carousel widget 41
carousel edit fractions Carousel widget 43


Typography

Choose how your text will appear to visitors. For details, see Typography.

Color

Choose a color: either use the color picker or a global color.

Position

From the menu, select  whether the fractions appear Outside or Inside the carousel.

Spacing

Use the slider or the counter control to adjust the amount of space between the fractions and the slides. For more details, see Units of measurement.

Progress Bar

Represent the pages in your carousel by using a progress bar positioned below the carousel. 

carousel Example of Progress bar marked Carousel widget 45
carousel edit progress bar Style tab Pagination Progress bar Carousel widget 47



Height

 Use the slider or the counter control to adjust the width of the progress bar. For details, see Units of measurement.

Normal/Hover

  • Normal: determine how the progress bar will appear by default. 
  • Hover : determine how it will appear when visitors mouse over them. 

Color

Choose a color: either use the color picker or a global color.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article