Usage

HTML structure

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

<div class="f-carousel" id="myCarousel">
  <div class="f-carousel__slide">1</div>
  <div class="f-carousel__slide">2</div>
  <div class="f-carousel__slide">3</div>
</div>

The Carousel will then automatically create an additional wrapper element needed to cover the scroll overflow, but you can make it yourself if necessary:

<div class="f-carousel" id="myCarousel">
  <div class="f-carousel__viewport">
    <div class="f-carousel__slide">1</div>
    <div class="f-carousel__slide">2</div>
    <div class="f-carousel__slide">3</div>
  </div>
</div>

When you create a vertical carousel, you need to specify its height using CSS, example:

#myCarousel {
  --f-carousel-slide-height: 60%;
  --f-carousel-spacing: 10px;

  height: 200px;
}

Initialization

const container = document.getElementById("myCarousel");
const options = {
  // Your custom options
};

Carousel(container, options).init();

JS Bin Example

Adding Plugins

Plugins extend Carousel with additional features beyond the built-in core features.

Pass an object containing all plugins using the plugins option or as the third parameter to the Carousel constructor.

Use the plugin name as the object key to specify plugin options.

Here is a basic example:

JavaScript

import { Carousel } from "@fancyapps/ui/dist/carousel/";
import "@fancyapps/ui/dist/carousel/carousel.css";

import { Autoplay } from "@fancyapps/ui/dist/carousel/carousel.autoplay.js";
import "@fancyapps/ui/dist/carousel/carousel.autoplay.css";

const container = document.getElementById("myCarousel");
const options = {
  Autoplay: {
    timeout: 1000,
  },
};

Carousel(container, options, { Autoplay }).init();

TypeScript

import { Carousel, type CarouselOptions } from "@fancyapps/ui/dist/carousel/";
import "@fancyapps/ui/dist/carousel/carousel.css";

import { Autoplay } from "@fancyapps/ui/dist/carousel/carousel.autoplay.js";
import "@fancyapps/ui/dist/carousel/carousel.autoplay.css";

const container = document.getElementById("myCarousel");
const options: Partial<CarouselOptions> = {
  Autoplay: {
    timeout: 1000,
  },
};

Carousel(container, options, { Autoplay }).init();

JS Bin Example

Data Attributes

Carousel supports several HTML5 data-* attributes for elements within the container element. Some are used to display the current state of the carousel (such as the number of pages), while others automatically attach click events that perform a specific action.

List of attributes

Attribute	Description
data-carousel-index	Current page index (starts from 0)
data-carousel-page	Current page index (starts from 1)
data-carousel-pages	Number of pages
data-carousel-go-prev	Navigate to previous page
data-carousel-go-next	Navigate to next page
data-carousel-go-to	Navigate to selected page
data-carousel-download	Start the download process for the download link specified on the active slide

Example

<div class="f-carousel" id="myCarousel">
  <div class="f-carousel__viewport">
    <div class="f-carousel__slide">1</div>
    <div class="f-carousel__slide">2</div>
    <div class="f-carousel__slide">3</div>
    <div class="f-carousel__slide">4</div>
    <div class="f-carousel__slide">5</div>
  </div>
  <button data-carousel-go-prev>⟵</button>
  <button data-carousel-go-next>⟶</button>
  <span data-carousel-page></span>/<span data-carousel-pages></span>
</div>

JS Bin Example