Carousel

Transitions & styles can be used to customize the look of Carousel modules

Overview

The Carousel module allows for multiple media assets to be placed in a container that can be autoplayed or swiped through based on speed, view and other settings.

Carousel Properties

Speed Number, default 300 Sets the speed (in milliseconds) between animations of slides.

Slides Per View Number, 1 Number of images that can be seen in the carousel at a time.

Space Between String, default 30 Space between images (in px) in the carousel.

Loop Slides Checkbox, default enabled If enabled, the slideshow should restart on carousel end.

Autoplay Checkbox, default disabled If enabled, the carousel with automatically start playing on load.

Pagination Checkbox, default enabled If enabled, it will display clickable slide indicators below the carousel.

Navigation Checkbox, default enabled If enabled, display on the left and right of the carousel to help with navigation of images.

Height String Swiper height (in px). This parameter allows to force Swiper height.

Setting this parameter will make Swiper not responsive to changes in screen and viewport sizes.

Carousel Styles

Theme Color String - Valid color string or hex code (#FFFFF) Sets the color of navigation arrows and the active pagination indicator.

Navigation Size String Sets the size of the left and right navigation arrows (in px). Example: 44px

Transition Effect (required) Dropdown Applies a transition effect when slides change. Options include:

  • slide

  • fade

  • cube

  • coverflow

  • flip

  • creative

  • cards

Nodes

Broadcasters

Carousel:slide-change

Broadcast event when slide changes.

Parameters

slideIndex - The index of the slide you would like to change to

Listeners

Carousel:on-slide-change Listener event when a slide changes

Last updated

Was this helpful?