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();
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:
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();
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();
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>