Fancyapps

Sync ​

This plugin is for syncing two carousels and making one carousel act as a navigation for another.

Basic example ​

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

JS Bin 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