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}#

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",}