Carousel

A dynamic widget that enables you to highlight pieces of content in a single space and a cyclic view.

The Carousel makes it possible to show more than one piece of content, while optimizing screen space by displaying only a subset of images on a cyclic view. The navigational controls on a carousel suggest additional content that is not visible, which encourages the user to continue exploring.

How to use

Elements inside the placeholder are split in different items. For dynamic content, use a List directly inside the placeholder and the list items will be Carousel Items by default.

Drag the Carousel pattern into your page.

Place your content into the Items placeholder. To use a Carousel with items from a database, drag a ListRecords into Items placeholder and create your custom content.

Publish and test.

Input parameters

Input Name

Description

Type

Mandatory

Default Value

Margin

Distance between each Carousel item.

Integer

False

16

Padding

Distance between the screen edges and the visible items on the screen.

Integer

False

0

Pagination

If true, sets the dots representing all items, which can be tapped to navigate directly to a given item.

Boolean

False

True

Navigation

If true, shows arrows to navigate left and right.

Boolean

False

True

Autoplay

If true, it enables the autoplay.

Boolean

False

False

Rewind

Applies a Rewind effect when the Carousel reaches the end and Loop is enabled. The default behavior is to show the first item without rewinding through the remaining.

Boolean

False

False

Loop

If true, it enables continuous slide of the Carousel even after it reaches the end.

Layout and classes

Advanced

Here are some more advanced use-cases of the widget.

Put arrows outside of Carousel

To place the arrows outside the carousel, change the input parameters Padding and Margin. To have this behavior both parameters must be of the same value. Padding creates a space around the carousel viewport and the margin pushes the elements apart, so they are hidden inside the carousel.

Customizing the dots style

It is possible to change the style of the dots on a Carousel with the custom CSS. Here are two examples of how to do it. To use in your application, copy the CSS and put it in your theme.