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.
<div class="carousel carousel-a">
...
</div>
<div class="carousel carousel-b">
...
</div>// options
sync: '.carousel-b'
// set as a selector string
sync: document.querySelector('.carousel-b')
// set as an elementInstall
Add flickity-sync.js to your scripts.
Download
CDN
<script src="https://unpkg.com/flickity-sync@3/flickity-sync.js"></script>Package managers
npm: npm install flickity-sync
Yarn: yarn add flickity-sync
Usage
jQuery
$('.carousel-a').flickity({
sync: '.carousel-b'
});
// only need to set sync on one of the Flickity galleries
$('.carousel-b').flickity();Vanilla JS
var flktyA = new Flickity( '.carousel-a', {
sync: '.carousel-b'
});
var flktyB = new Flickity('.carousel-b');HTML
<div class="carousel carousel-a" data-flickity='{ "sync": ".carousel-b" }'>
...
</div>
<div class="carousel carousel-b" data-flickity>
...
</div>Webpack
const Flickity = require('flickity');
require('flickity-sync');
var flktyA = new Flickity( '.carousel-a', {
sync: '.carousel-b'
});
var flktyB = new Flickity('.carousel-b');By Metafizzy
