Skip to main content

Overview

Awesome carousels with the most native feeling.

Key Features#

  • Smart infinite navigation without cloned elements
  • Smooth, natural animations
  • Adaptive - wrapper element does not require fixed height value
  • Supports any number of virtual slides
  • Customizable using CSS, including slide widths and spacing
  • Accessible

Quick demo#

Usage#

A minimal setup requires container element and a group of slide elements:

<div class="carousel">  <div class="carousel__slide">1</div>  <div class="carousel__slide">2</div>  <div class="carousel__slide">3</div></div>

Initialise Carousel using constructor, pass the container element and optional options object:

const myCarousel = new Carousel(document.querySelector(".carousel"), {  // Options});

The width of the slides is controlled using CSS. Use CSS margin property to create a gap between slides.

Carousel supports virtual slides, create an empty container and use slides option during initialization (demo):

const myCarousel = new Carousel(document.querySelector(".carousel"), {  slides: [    {      html: "1",    },    {      html: "2",    },    {      html: "3",    },  ],});

You can have any number of slides, Carousel will load only the visible ones and will preload the previous/next page (can be configured using preload option).