FancyappsOptions #
Carousel has many options that allow for easy customization. Several options accept a method and use a return value.
In this example, infinite navigation is enabled depending on the number of slides:
new Carousel(document.getElementById("myCarousel"), {
infinite: (carousel) => {
return carousel.pages.length > 2;
},
});
The Carousel uses Panzoom under the hood, and you can customize it using the Panzoom option. So, for example, you can change the animation speed:
new Carousel(document.getElementById("myCarousel"), {
Panzoom: {
decelFriction: 0.3,
},
});
Constructor Options #
You can pass a set of options as a parameter into a Carousel constructor:
const container = document.getElementById("myCarousel");
const options = { infinite: true };
new Carousel(container, options);
Global Options #
If you have multiple instances, you might want to set options that are common to all of them. Use Carousel.defaults static property to change default options:
Carousel.defaults.infinite = true;
If you want to change several values at the same time:
Carousel.defaults = {
...Carousel.defaults,
infinite: true,
adaptiveHeight: true,
};
Available Options #
adaptiveHeight #
If true, the Carousel will adjust its height to the height of the currently active slide(s)
Type
boolean | ((any?: any) => boolean)
Default
false
axis #
Horizontal (x) or vertical Carousel (y)
Type
"x" | "y" | ((any?: any) => "x" | "y")
Default
"x"
breakpoints #
Options that will be applied for the given breakpoint, overriding the base options
Type
Record<string, Omit<Partial<OptionsType>, "breakpoints">>
Default
{}
center #
If true, the Carousel will center the active page
Type
boolean | ((any?: any) => boolean)
Default
true
classes #
Class names for DOM elements
Type
Partial<classesType>
Default
{
container: "f-carousel",
viewport: "f-carousel__viewport",
track: "f-carousel__track",
slide: "f-carousel__slide",
isLTR: "is-ltr",
isRTL: "is-rtl",
isHorizontal: "is-horizontal",
isVertical: "is-vertical",
inTransition: "in-transition",
isSelected: "is-selected",
}
direction #
Change direction of Carousel
Type
"ltr" | "rtl" | ((any?: any) => "ltr" | "rtl")
Default
"ltr"
dragFree #
If true, the Carousel will settle at any position after a swipe
Type
boolean | ((any?: any) => boolean)
Default
false
enabled #
Carousel is enabled or not; useful when combining with breakpoints
Type
boolean
Default
true
fill #
If true, the Carousel will fill the free space if infinite: false
Type
boolean | ((any?: any) => boolean)
Default
true
friction #
Panzoom friction while changing page
Type
number | ((any?: any) => number)
Default
0.12
infinite #
If true, the Carousel will scroll infinitely
Type
boolean | ((any?: any) => boolean)
Default
true
initialPage #
Index of initial page
Type
number
Default
0
initialSlide #
Index of initial slide
Type
number
Default
undefined
l10n #
Localization of strings
Type
Record<string, string>
Default
en
on #
Optional event listeners
Type
Partial<Events>
Default
{}
Panzoom #
Custom options for the Panzoom instance
Type
Partial<PanzoomOptionsType>
Default
{}
preload #
Number of pages to preload before/after the active page
Type
number
Default
1
slides #
Virtual slides
Type
Array<userSlideType>
Default
[]
Note
type userSlideType = String | HTMLElement | Partial<slideType>;
interface slideType {
html: string;
el: HTMLElement | null;
isDom: boolean;
class: string;
index: number;
dim: number;
gap: number;
pos: number;
transition: string | false;
}
slidesPerPage #
The number of slides to group per page
Type
number | "auto"
Default
"auto"
track #
Specify the track element
Type
HTMLElement | null | ((any?: any) => HTMLElement | null)
Default
null
transition #
The name of the transition animation when changing Carousel pages
Type
"crossfade" | "fade" | "slide" | "classic" | string | false
Default
"fade"
viewport #
Specify the viewport element
Type
HTMLElement | null | ((any?: any) => HTMLElement | null)
Default
null