Skip to main content


slides {Array}

Virtual slides. Each object should have at least html property that will be used to set content. Default: []


<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.


{'slidesPerPage' : 'auto'}

{'slidesPerPage' : 1}

initialPage {Number}

Index of initial page. Default: 0

friction {Number}

Panzoom friction while changing page. Default: 0.92


{'friction' : 0.96}

{'friction' : 0.8}

center {Boolean}

Should center active page. Default: true


{'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


{'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",