Carousel.

Overview

The carousel blocks gives you the ability to add slideshows to your page. When you add the carousel block you gain access to the carousel item block. Each carousel can have as many slides as you wish and each slide can included whatever content you want.

• Carousel settings
• Carousel item settings

The carousel block includes the following options:

Settings

Display controls

The display controls options allows you to enable or disable the next and previous arrows on the carousel. To turn the arrows on check this option.

Display indicators

The display indicators option allows you to enable or disable slide indicators at the bottom of the carousel. To turn the indicators on, check this option.

Touch enabled

By default carousels support swiping left and right on touch devices. You can disable this by checking this option.

Auto Scroll

The auto scroll option allows you to make slides automatically rotate on a timer. The default time per slide is 4 seconds but this can be overridden on an individual slide basis.

Style

The style option allows you to change some of the colours for the carousel controls. There are two options available:

• Default: Will display light controls – best for use on dark backgrounds
• Dark: Adds the .carousel-dark class to display dark controls – best for use on light colour background

Transition

The transition options allows you to specify how the slides should transition from one to the next. There are two options available:

• Default: Slides will animate to the left
• Crossfade: Slides are overlayed on top of each other and will fade from one t the next

Device specific settings

Along with global options for a block there are also device specific settings. These settings allow you to specify options that will be applied to their relevant device size. The device sizes available match up with the Bootstrap breakpoints:

• XS (<576px)
• SM (≥576px)
• MD (≥768px)
• LG (≥992px)
• XL (≥1200px)
• XXL (≥1400px).

Device specific settings are tabbed and to update a specific device you simply need to click on the relevant tab to reveal the options. Each device has the same options available. For the purpose of these docs we only explain one device tab (as all of the other tabs are the same for their related breakpoint).

Highlighted Tabs

Due to there being options for a number of different device sizes it could become confusing remembering which settings you have chosen. To help, when you make a change in a specific device tab the tab will be highlighted green. If all of the values in the tab are reverted back to the default then the highlight will disappear.

Hide on XS

You can hide this block on any device. As default all blocks are displayed. If you wish to hide a block on a specific device you can check this option. This option will only apply to the related device. To hide on other devices, click on the relevant device tab and check the Hide on [device] option.

Reset Settings

Blocks tend to have a large number of settings along with different settings for each device size. You may get to the point where you have changed lots of settings and want to revert them back to the default. This can be time consuming and difficult to remember which settings have been changed to we have supplied three buttons that make this a piece of cake. Simply click the relevant button to reset your settings.

• All: When you click this button is will reset all of the settings for the selected block
• Global: When you click this button it will reset all of the settings outside of the device specific tabs
• Devices: When you click this button it will reset all of the settings within the Device Specific tabs

Advanced

HTML Anchor

The HTML anchor option allows you to set an ID on the current block. This is useful when you wish to link to a specific area on a page.

Additional CSS class(es)

The additional class(es) option lets you add any other classes to the block. This is really useful as it allows you to utilise all of the Bootstrap utility classes to quickly apply styles and add more advanced customisations. A few examples of this would be to align all inner content by adding the text-start, text-center or text-end classes. You also have the ability to quickly search all of the available Bootstrap classes. To search Bootstrap classes open the Add Bootstrap class select box. You can filter the results by typing in the available search field. When you select an option it will automatically be added to your class list.

Carousel item

Carousel items are basically slides within the slideshow. You can adds as many slides as you wish and each slide can hold whatever content you like.

Settings

Interval

The interval option allows you to specify how long the slide should stay active before moving on to the next slide. The value input should be in milliseconds eg: 4 seconds would be 4000.

Reset Settings

Blocks tend to have a large number of settings along with different settings for each device size. You may get to the point where you have changed lots of settings and want to revert them back to the default. This can be time consuming and difficult to remember which settings have been changed to we have supplied three buttons that make this a piece of cake. Simply click the relevant button to reset your settings.

• All: When you click this button is will reset all of the settings for the selected block
• Global: When you click this button it will reset all of the settings outside of the device specific tabs
• Devices: When you click this button it will reset all of the settings within the Device Specific tabs

Advanced

HTML Anchor

The HTML anchor option allows you to set an ID on the current block. This is useful when you wish to link to a specific area on a page.

Additional CSS class(es)

The additional class(es) option lets you add any other classes to the block. This is really useful as it allows you to utilise all of the Bootstrap utility classes to quickly apply styles and add more advanced customisations. A few examples of this would be to align all inner content by adding the text-start, text-center or text-end classes. You also have the ability to quickly search all of the available Bootstrap classes. To search Bootstrap classes open the Add Bootstrap class select box. You can filter the results by typing in the available search field. When you select an option it will automatically be added to your class list.