| Key | \nType | \nDefault Value | \nDescription | \n \n \n \n
|---|---|---|---|
| autoplay | \nBoolean | \n | \n \n Determines if the carousel will slide automatically based on `autoplayInterval`. | \n
| autoplayHoverPause | \nBoolean | \n | \n \n Determines if the carousel should stop auto sliding when the mouse hovers the carousel. | \n
| autoplayInterval | \nNumber | \n | \n \n Changes the timing for auto slide in milliseconds. | \n
| breakpoints | \nObject | \n\n | \n \n Customise the breakpoints. All breakpoints must be defined and values must be valid or default will be used. | \n
| controls | \nObject | \n\n | \n \n Change the contents and styles of the previous/next controls and pagination for the carousel. HTML can be passed in a String to `previous` and `next`. Styles must be passed as an object.\n Example:\n | \n
| loop | \nBoolean | \n | \n Determines if the carousel should loop infintely. If false, carousel will only animate between first and last slide. | \n
| mouseDrag | \nBoolean | \n | \n Determines if the carousel slides can be dragged using the mouse when holding left click. Note - the slides can be dragged on touch devices still even when mouseDrag is set to false.This option works better when slides are not populated with links. | \n
| showEmptySpace | \nBoolean | \n | \n \n Determines if the carousel can be swiped until only the last slide is visible on the left side of the screen. \nIf false, the carousel will not be slideable once the last slide is visible on screen. \nFor pagination - If true, a pagination button will be used for each slide. If false, pagination buttons will only show for the first slide rendered up to the first slide visible where the last slide is on screen (paginationCount = totalSlides - visibleSlidesOnScreen + 1). This is to prevent sliding past the last slide. \nNote - this option has no effect if loop is true. \n | \n
| slidePadding | \nObject | \n\n | \n \n Change the padding between slides for specific breakpoints. If a unit of measurement is not included in the value, it will be assumed to be a pixel value. \n Example:\n | \n
| slidesVisible | \nObject | \n\n | \n Change the number of slides visible at specific breakpoints. The number can be a whole number or decimal. If a breakpoint is null, the carousel will use the value from a previous breakpoint. | \n
| staticBreakpoint | \nString | \n | \n \n Removes the carousel functionality and animation at the specified breakpoint and shows all items on screen.\n Optional Values:\n | \n \n
| touchDrag | \nBoolean | \n | \n \n Determines if the user can drag carousele slides with touch input such as on mobile and tablets or with touch screen monitors.\n \nThis is set to true by default as touch drag is better UX on touch devices compared to button presses. \n | \n
| Key | \nType | \nDefault Value | \nDescription | \n \n \n \n
|---|---|---|---|
| autoplay | \nBoolean | \n | \n \n Determines if the carousel will slide automatically based on `autoplayInterval`. | \n
| autoplayHoverPause | \nBoolean | \n | \n \n Determines if the carousel should stop auto sliding when the mouse hovers the carousel. | \n
| autoplayInterval | \nNumber | \n | \n \n Changes the timing for auto slide in milliseconds. | \n
| breakpoints | \nObject | \n\n | \n \n Customise the breakpoints. All breakpoints must be defined and values must be valid or default will be used. | \n
| center | \nBoolean | \n | \n Aligns the current slide in the center of the carousel instead of to the left-side. Caveat - `center` will be disabled if `group` is `true`. | \n
| controls | \nObject | \n\n | \n \n Change the contents and styles of the previous/next controls and pagination for the carousel. HTML can be passed in a String to `previous` and `next`. Styles must be passed as an object.\n Example:\n | \n
| debug | \nBoolean | \n | \n Allows warnings and caught-errors in console if enabled. | \n
| group | \nBoolean | \n | \n Group all items in current view to move all outside of view and show all new items when the carousel is dragged or the pagination or control buttons are clicked. By default, items are treated individually and will move one at a time. Caveat - if both `group` and `loop` are set to true, ensure there is no remainder of slides when dividing total slide-count by the value of `slidesVisible` at the current breakpoint. | \n
| loop | \nBoolean | \n | \n Determines if the carousel should loop infintely. If false, carousel will only animate between first and last slide. Caveat - loop will be disabled if `group` is `true` but slide-count divided by the `slideVisible` value at the current breakpoint leaves a remainder. | \n
| mouseDrag | \nBoolean | \n | \n Determines if the carousel slides can be dragged using the mouse when holding left click. Note - the slides can be dragged on touch devices still even when mouseDrag is set to false.This option works better when slides are not populated with links. | \n
| showEmptySpace | \nBoolean | \n | \n \n Determines if the carousel can be swiped until only the last slide is visible on the left side of the screen. \nIf false, the carousel will not be slideable once the last slide is visible on screen. \nFor pagination - If true, a pagination button will be used for each slide. If false, pagination buttons will only show for the first slide rendered up to the first slide visible where the last slide is on screen (paginationCount = totalSlides - visibleSlidesOnScreen + 1). This is to prevent sliding past the last slide. \nNote - this option has no effect if loop is true. \n | \n
| slidePadding | \nObject | \n\n | \n \n Change the padding between slides for specific breakpoints. If a unit of measurement is not included in the value, it will be assumed to be a pixel value. \n Example:\n | \n
| slidesVisible | \nObject | \n\n | \n Change the number of slides visible at specific breakpoints. The number can be a whole number or decimal. If a breakpoint is null, the carousel will use the value from a previous breakpoint. | \n
| startingSlide | \nNumber | \n | \n The index of the slide to start on when the carousel renders. If the index is invalid, the default will be used.\n | \n
| staticBreakpoint | \nString | \n | \n \n Removes the carousel functionality and animation at the specified breakpoint and shows all items on screen.\n Optional Values:\n | \n \n
| touchDrag | \nBoolean | \n | \n \n Determines if the user can drag carousel slides with touch input such as on mobile and tablets or with touch screen monitors.\n \nThis is set to true by default as touch drag is better UX on touch devices compared to button presses. \n | \n
| transitionDuration | \nNumber | \n | \n \n The CSS transition-duration property that controls how long it takes to animate between slides.\n | \n
| transitionTimingFunction | \nString | \n | \n \n The CSS transition-timing-function property that controls the animation timing function between slides.\n | \n
| Event | \ntype | \nDescription | \n \n \n
|---|---|---|
| slide-change | \nnumber | \nEmits the new slide number on slide-change. | \n