Fancyapps

Usage ​

HTML structure ​

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

html
<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:

html
<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:

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

  height: 200px;
}

Initialization ​

js
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:

js
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();
ts
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