Enable sync for Flickity
npm install flickity-syncEnables 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
`
Add flickity-sync.js to your scripts.
` html`
npm: npm install flickity-sync
Yarn: yarn add flickity-sync
` js`
$('.carousel-a').flickity({
sync: '.carousel-b'
});
// only need to set sync on one of the Flickity galleries
$('.carousel-b').flickity();
` js`
var flktyA = new Flickity( '.carousel-a', {
sync: '.carousel-b'
});
var flktyB = new Flickity('.carousel-b');
` 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 🌈🐻