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 element

See demo on CodePen.

Install

Add flickity-sync.js to your scripts.

Download

• flickity-sync.js

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 🌈🐻