Fancyapps

Options ​

Carousel has many options that allow for easy customization. Several options accept a method and use a return value.

Usage ​

You can pass a set of options as a parameter into a Carousel constructor:

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

Carousel(container, options).init();

In this example, infinite navigation is enabled depending on the number of slides:

js
Carousel(document.getElementById("myCarousel"), {
  infinite: (instance) => {
    return instance.getPages().length > 2;
  },
}).init();

Available Options ​

adaptiveHeight ​

If true, Carousel will adjust its height to the height of the first child in the currently active slide(s)

Type

boolean | ((ref: CarouselInstance) => boolean)

Default

false

breakpoints ​

Optional options that will be applied for the given breakpoint, overriding the base options

Type

Record<string, Omit<Partial<CarouselOptions>, "breakpoints">>

Default

undefined

captionEl ​

Optional element where the caption content is placed

Type

HTMLElement | null | ((api: CarouselInstance) => HTMLElement | null)

Default

undefined

center ​

If true, Carousel will center the active page

Type

boolean | ((ref: CarouselInstance) => boolean)

Default

true

classes ​

Class names for DOM elements

Type

Partial<CarouselClasses>

Default

js
{
    container: "f-carousel",
    isEnabled: "is-enabled",
    isLTR: "is-ltr",
    isRTL: "is-rtl",
    isHorizontal: "is-horizontal",
    isVertical: "is-vertical",
    hasAdaptiveHeight: "has-adaptive-height",
    viewport: "f-carousel__viewport",
    slide: "f-carousel__slide",
    isSelected: "is-selected",
}

dragFree ​

If true, the Carousel will settle at any position after a swipe

Type

boolean | ((ref: CarouselInstance) => boolean)

Default

false

enabled ​

Carousel is enabled or not; useful when combining with breakpoints

Type

boolean

Default

true

errorTpl ​

HTML template for error message

Type

string | ((slide: Partial<CarouselSlide>) => string)

Default

html
<div class="f-html">{{ERROR}}</div>

fill ​

If true, Carousel will fill the free space if infinite: false

Type

boolean | ((ref: CarouselInstance) => boolean)

Default

false

formatCaption ​

Optional function to customize captions per slide

Type

(ref: CarouselInstance, slide: CarouselSlide) => HTMLElement | string

Default

undefined

gestures ​

Optional options for Gestures instance

Type

Partial<GesturesOptions> | false | (() => Partial<GesturesOptions> | false)

Default

undefined

infinite ​

If true, the Carousel will scroll infinitely

Type

boolean | ((ref: CarouselInstance) => boolean)

Default

true

initialPage ​

Index of initial page

Type

number

Default

0

initialSlide ​

Optional index of initial slide

Type

number

Default

undefined

l10n ​

Optional localization of strings

Type

Record<string, string>

Default

undefined

on ​

Optional event listeners

Type

Partial<CarouselEvents>

Default

undefined

plugins ​

Optional user plugins

Type

Record<string, CarouselPlugin>

Default

undefined

rtl ​

If true, content direction will be set to RTL

Type

boolean | ((ref: CarouselInstance) => boolean)

Default

false

setTransform ​

Optional function to customize how each slide position is set in the rendering

Type

js
(
    ref: CarouselInstance,
    slide: CarouselSlide,
    state: {
        x: number;
        y: number;
        xPercent: number;
        yPercent: number;
    }
) => void

Default

undefined

slides ​

Virtual slides

Type

Partial<CarouselSlide>[]

Default

[]

slidesPerPage ​

The number of slides to group per page

Type

"auto" | number | ((ref: CarouselInstance) => "auto" | number)

Default

"auto"

spinnerTpl ​

HTML template for spinner element

Type

string | ((slide: Partial<CarouselSlide>) => string)

Default

<div class="f-spinner"></div>

style ​

Optional custom style attributes for the container

Type

Record<string, string>

Default

undefined

transition ​

The name of the transition animation when changing Carousel pages

Type

CarouselTransitionType

Default

"fade"

tween ​

Custom Tween options that are taken into account if the transition is set to tween

Type

Partial<CarouselTweenOptions>

Default

js
{
    clamp: true,
    mass: 1,
    tension: 200,
    friction: 25,
    restDelta: 1,
    restSpeed: 1,
    velocity: 0,
}

vertical ​

If true, carousel will navigate vertically

Type

boolean | ((ref: CarouselInstance) => boolean)

Default

false