Sync
This plugin is for syncing two carousels and making one carousel act as a navigation for another.
Basic example
Usage
Include corresponding JS file:
js
import { Sync } from "@fancyapps/ui/dist/carousel/carousel.sync.js";
Initialize the first carousel instance:
js
const mainContainer = document.getElementById("myCarousel");
const mainOptions = {
// Your custom options
};
const mainCarousel = Carousel(mainContainer, mainOptions).init();
Initialize the second carousel instance. Pass Sync
to Carousel constructor or use plugins
option. Use the Sync
option to set a target.
js
const navContainer = document.getElementById("myNavigation");
const navOptions = {
Sync: {
target: mainCarousel,
},
};
Carousel(navContainer, navOptions, { Sync }).init();
Options
syncOnChange
Synchronize when the instance's active page changes
Type
boolean
Default
false
syncOnClick
Synchronize when user clicks on instance slide
Type
boolean
Default
true
syncOnHover
Synchronize when the user hovers over the instance slide
Type
boolean
Default
false
target
An instance of a carousel acting as target
Type
CarouselInstance
Default
undefined
Methods
getTarget
Retrieve target instance
Returns
CarouselInstance | undefined