Carousel

A carousel displays slides of data that change focus at a regular interval.  Images are commonly used, but any kind of object may be added to the list of slides in the carousel tree.

Carousel Attributes

AutoPlay

AutoPlay indicates whether or not the frames should begin sliding at page load.  Default is set to true. If set to false, the frames do not begin sliding until an action is taken that causes the frames to change their initial view.  This could be clicking a navigation dot, scrolling inside the carousel space, or clicking an arrow if present  Default is true.

Preview Mode

If PreviewMode is true, the focal object is in the center of the frame, with prev/next objects partially shown on either side.  When true, the default editable center padding is set to 50px.  Default is false.

Navigation Dots

centerPadding

Navigation Dots show the position of the scroll through a carousel.  If there are 5 frames in the carousel, then there would be 5 navigation dots.  The slide progress automatically, but the navigation dots can also be used to bring a specific slide into focus.

As the slides progress, the active dot turns black while the dots representing inactive frames are greyed out.  This can be modified with CSS.

If set to true, the navigation dots appear below the carousel.  Default is true.

Fade

Slides can fade during the transition as the new slide comes into focus.  The effect can be modified with CSS.  Default is false.

Infinite

Infinite determines if the carousel will continue playing forever.  Default is true.

Slides per Row

This is the number of frames that will be displayed for each row.

Rows

This is the vertical rows in the carousel.  Default is 1.  

Speed

Speed controls the amount of time between slide transitions.  The default speed is 500ms, meaning that the image will change every 1/2 second.  It can be set to any number.

Slide Duration

Slide duration is the amount of time a slide remains in focus until the transition begins.  The default is 2000, meaning 2 seconds.

Initial Slide

Indicates which slide to start with.  Default is Zero.

Slides to Scroll

Slides to Scroll indicates how many new slides should come into focus at a time.  Default is 1.

If slides to scroll is a number larger than 2, it's possible that you may encounter performance issues.  On a mobile phone, you may experience unwanted display issues if the number is larger than 1.  See Default Responsiveness for suggestions on handling these types of situations.

Class Name

Class name allows style rules defined in a CSS class to apply to the carousel. 

Carousel Responsiveness


Default Responsiveness

Carousels with more than 1 slide per row, or slides to show can automatically adjust certain page properties, with the following default screen pixel-size breakpoints which are fully customizable:

  • 1024

  • 768

  • 600

  • 480


These can be removed, added to or altered in the UI Object configurator.

Default Slides without Breakpoints

Breakpoints are optional.  If there are no breakpoints, then the default settings are used which are not optional as follows:

{
"defaultslidesPerRow": "3",
"defaultslidesToShow": "3",
}

Special Carousels

Image Carousel

The Image Carousel will select all of the images that a client has which match a particular type or tag  and place them in the carousel.  For more information about the image category carousel, see our Image Carousel Page.

Carousel Definition

The Carousel Definition contains the following:

With optional breakpoints

{
"dots": true,
"fade": true,
"rows": 1,
"speed": 500,
"autoplay": true,
"infinite": true,
"className": "",
"centerMode": false,
"initialSlide": 0,
"defaultslidesPerRow": "3",
"defaultslidesToShow": "3",
"slidesToScroll": 1,
[{"breakpoint":1024,
{
"sildesPerRow": 3,
"slidesToShow":3
}
},{"breakpoint":600,
{
"sildesPerRow": 3,
"slidesToShow":3
}
},{"breakpoint":480,
{
"sildesPerRow": 3,
"slidesToShow":3
}
}
],
"autoplaySpeed": 2000,
"centerPadding": "",
}

Without Optional Breakpoints

{
"dots": true,
"fade": true,
"rows": 1,
"speed": 500,
"autoplay": true,
"infinite": true,
"className": "",
"centerMode": false,
"initialSlide": 0,
"defaultslidesPerRow": "3",
"defaultslidesToShow": "3",
"slidesToScroll": 1,
"autoplaySpeed": 2000,
"centerPadding": ""
}

When it is a page or website


"11151": {
"type": "CAROUSEL",

{
"dots": true,
"fade": true,
"rows": 1,
"speed": 500,
"autoplay": true,
"infinite": true,
"className": "",
"centerMode": false,
"initialSlide": 0,
"defaultslidesPerRow": "3",
"defaultslidesToShow": "3",
"slidesToScroll": 1,
"autoplaySpeed": 2000,
"centerPadding": ""
}}