Flickity sync

Enables sync option for Flickity

You can sync two Flickity carousels. Whenever one selects a cell, its companion will select its matching cell of the same index.

`` html


` js
// options
sync: '.carousel-b'
// set as a selector string

sync: document.querySelector('.carousel-b')
// set as an element
`

See demo on CodePen.

Install

Add flickity-sync.js to your scripts.

$3

+ flickity-sync.js

$3

` html

`

$3

npm: npm install flickity-sync

Yarn: yarn add flickity-sync

Usage

$3

` js
$('.carousel-a').flickity({
sync: '.carousel-b'
});
// only need to set sync on one of the Flickity galleries
$('.carousel-b').flickity();
`

$3

` js
var flktyA = new Flickity( '.carousel-a', {
sync: '.carousel-b'
});
var flktyB = new Flickity('.carousel-b');
`

$3

` html


` js
const Flickity = require('flickity');
require('flickity-sync');

var flktyA = new Flickity( '.carousel-a', {
sync: '.carousel-b'
});
var flktyB = new Flickity('.carousel-b');
``

---

By Metafizzy 🌈🐻