Carousel

The Carousel component lets you display content in a sliding carousel format, with flexible settings for slides, navigation, and autoplay.

What is the Carousel component?

The Carousel component lets you display content in a sliding carousel format. Carousels must contain one or more Carousel Slide components to hold the moving content. You can configure navigation, autoplay, margins, and more.

Open the CMS editor where you want to add or edit a Carousel component.

Drag the Carousel component onto your page.

Add one or more Carousel Slide components inside the Carousel.

Adjust items, dots, loop, center, arrows, margin, autoplay, and timeout as needed.

Save your changes in the editor.

Here is a how to video for the carousel component:

Carousel Component Settings

All Carousel components support the standard CMS settings below. Use these tabs to control layout, typography, and display for your carousel:

Settings

Items

Enter the number of slides you want to display in the desktop form of the carousel.

Dots

Toggle this option to show or hide the dot indicators for the slides.

Loop

Toggle this option to enable or disable continuous loop mode for the carousel.

Center

Toggle this option to enable or disable centered view mode for the carousel.

Arrows

Toggle this option to show or hide the navigation arrows for the slides.

Mobile Items

Enter the number of slides you want to display in the mobile form of the carousel.

Tablet Items

Enter the number of slides you want to display in the tablet form of the carousel.

Carousel Margin

Enter the margin (in pixels) between each slide in the carousel.

Autoplay

Toggle this option to enable or disable autoplay for the carousel.

Autoplay Timeout

Enter the duration (in milliseconds) for the autoplay timeout.

General

cms general

Selectors

In this box you can add classes that are defined elsewhere on the site to a specific page.

ID

ID is used to direct user to an element of the page or identify it for future use, so you can link to this aspect of the page.

Styles

Styles are used to add a specific style not predefined in a class. You can add style settings which can be applied against any component. Below are a list of styles you can add:

Margin (either just "margin:" or specific sides of a component like "margin-top:" or "margin-left:")
Padding (either just "padding:" or specific sides of a component like "padding-top:" or "padding-left:")
Max Width
Font
Border
ID

Examples:

max-width: 352px!important;
margin-bottom: 0 auto;
padding-top: 30px;

To center an image: margin:auto;
To center text/markdown: text-align: center;
To make a component go edge-to-edge: margin-left:-15px;margin-right:-15px

Typography

This section controls the text that appears on the page. cms Typography

Colour

This box can be used to change the colour of the text. Use hex colour codes eg Red #ff0000 White #ffffff

Font Family

Specify the font family or leave blank to automatically inherit the default page font

Size

Specify the size or leave blank to automatically inherit the default initial size

Weight

Specify the weight from the dropdown list, choose from 'light', 'normal' or 'bold' or select 'auto' to automatically inherit the default weight.

Alignment

Use icons to select the alignment choose from: 'no alignment', 'left align', 'centre align', 'right align' and 'justify' respectively

Text Transform

Use icons to change the text from block capitals to lower case or title case or no transformation.

Text Style

Use icons to choose from Italicised or not.

Text Decoration

Use icons to choose from no decoration, strikethrough, underline or overline

Display

cms Display

Display

Choose from the dropdown list to select display default is block, options are 'Flex', 'inline', 'none' and 'inline block'

Width

Specify a width

Max Width

Specify a max width

Min W

Specify a min width

Height

Specify a height

Max Height

Specify a maximum height

Min H

Specify a minimum height

BG

Change the background colour

Overflow

Chose from visible, not visible(icon) Scroll, scroll x

Spacing

Click on margins or borders to increase the margin or border by pixels

Borders

Click on borders to increase the border by pixels

General

cms general

Selectors

In this box you can add classes that are defined elsewhere on the site to a specific page

ID

ID is used to direct user to an element of the page or identify it for future use, so you can link to this aspect of the page

Styles

Styles are used to add a specific style not predefined in a class. You can add style settings which can be applied against any component. Below are a list of styles you can add:

Margin (either just "margin:" or specific sides of a component like "margin-top:" or "margin-left:")
Padding (either just "padding:" or specific sides of a component like "padding-top:" or "padding-left:")
Max Width
Font
Border
ID

Here are some examples:

max-width: 352px!important; margin-bottom: 0 auto; padding-top: 30px;

There are two ways to centre an element using css depending on what it is. To centre an image use margin:auto; to centre text or markdown you can use text-align: center;

To make a component go all the way to the edge of the screen add:

margin-left:-15px;margin-right:-15px

Carousel

On this page