Fancyapps
Return to top
On this page

Getting Started

Installation

Package manager

sh
# Usage with NPM
$ npm install --save @fancyapps/ui

# and with Yarn
$ yarn add @fancyapps/ui

Once installed, you can include Carousel as an ES module:

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

Stackblitz Example

CDN

If you prefer installing from a content delivery network:

html
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel/carousel.umd.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel/carousel.css"
/>

JSFiddle Example

Usage

Add markup

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 additional wrapper elements needed to cover the scroll overflow, but you can make them yourself if necessary:

html
<div class="f-carousel" id="myCarousel">
  <div class="f-carousel__viewport">
    <div class="f-carousel__track">
      <div class="f-carousel__slide">1</div>
      <div class="f-carousel__slide">2</div>
      <div class="f-carousel__slide">3</div>
    </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;
}

JSFiddle Example

Initialize

js
const container = document.getElementById("myCarousel");
const options = { infinite: false };

new Carousel(container, options);

Plugins

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

Pass the object containing all plugins 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/carousel.esm.js";
import "@fancyapps/ui/dist/carousel/carousel.css";

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

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

new Carousel(container, options, { Autoplay });

Localization

Use l10n option to provide translations.

Translations are already available for some languages. You can view them and provide a new one using an existing one as a template - https://github.com/fancyapps/ui/tree/main/l10n/Carousel

ESM module

First, load translations from the corresponding JS file. For example, German (de):

html
import { de } from '@fancyapps/ui/dist/carousel/l10n/de.esm.js';

Specify translations like this:

js
new Carousel(container, {
  l10n: de,
});

Stackblitz Example

UMD module

First, load the corresponding JS file. For example, German (de):

html
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/carousel/l10n/de.umd.js"></script>

The translations will then be loaded into the Carousel.l10n.de object:

js
new Carousel(container, {
  l10n: Carousel.l10n.de,
});

JSFiddle Example