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. Combine these two properties to choose the number of visible slides.

The height of the Carousel is not fixed and changes automatically with the content.

Lazy loading

Use the data-lazy-src attribute instead of the src attribute for any image. Images that are outside of a carousel viewport will not load (demo):

<div id="myCarousel" class="carousel">
<div class="carousel__slide">
<img data-lazy-src="https://lipsum.app/id/1/1200x675" />
</div>
<div class="carousel__slide">
<img data-lazy-src="https://lipsum.app/id/2/1200x675" />
</div>
<div class="carousel__slide">
<img data-lazy-src="https://lipsum.app/id/3/1200x675" />
</div>
</div>

Virtual slides

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

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",
},
],
});