Options
slides {Array}
Virtual slides. Each object should have at least html
property that will be used to set content. Default: []
Example
<div id="myCarousel" class="carousel"></div>
const myCarousel = new Carousel(document.querySelector("#myCarousel"), {
slides: [
{ html: "First slide" },
{ html: "Second slide" },
{ html: "Third slide" },
],
});
preload {Number}
Number of slides to preload before/after visible slides. Default: 0
slidesPerPage {String|Number}
Number of slides to group into the page. Default: auto
Possible values: "auto" or a positive number.
Examples
{'slidesPerPage' : 'auto'}
{'slidesPerPage' : 1}
initialPage {Number}
Index of initial page. Default: 0
friction {Number}
Panzoom friction while changing page. Default: 0.92
Examples
{'friction' : 0.96}
{'friction' : 0.8}
center {Boolean}
Should center active page. Default: true
Examples
{'center' : true}
{'center' : false}
infinite {Boolean}
Should carousel scroll infinitely. Default: true
fill {Boolean}
Should the gap be filled before first and after last slide if infinite: false
. Default: true
Examples
{'infinite' : false, 'center': true, 'fill' : true}
{'infinite' : false, 'center': true, 'fill' : false}
dragFree {Boolean}
Should Carousel settle at any position after a swipe. Default: false
classNames {Object}
CSS class names for various elements. Default:
{
viewport: "carousel__viewport",
track: "carousel__track",
slide: "carousel__slide",
// Classname toggled for slides inside current page
slideSelected: "is-selected",
}
l10n {Object}
Localization of strings. Default:
{
NEXT: "Next slide",
PREV: "Previous slide",
GOTO: "Go to slide %d",
}