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:
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:
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
{
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
<div class="f-html"></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
(
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
{
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