Fancyapps
Return to top
On this page

Sync

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

Examples

Basic example

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

JSFiddle Example

Usage

This is a built-in plugin and no additional files need to be loaded.

js
// Main carousel
const mainContainer = document.getElementById("myCarousel");
const mainOptions = {};

const mainCarousel = new Carousel(mainContainer, mainOptions);

// Carousel for navigation
const navContainer = document.getElementById("myNavigation");
const navOptions = {
  Sync: {
    target: mainCarousel,
  },
};

new Carousel(navContainer, navOptions);

Options

friction

Target carousel sliding animation friction (after clicking navigation carousel slide)

Type

number

Default

0.35

An instance of a carousel acting as navigation

Type

Carousel

Default

undefined

target

An instance of a carousel acting as target

Type

Carousel

Default

undefined