Skip to content

helge79/flickity-sync

This branch is 5 commits ahead of metafizzy/flickity-sync:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

15ad32b Β· Jun 1, 2022

History

21 Commits
Mar 6, 2022
Mar 6, 2022
Mar 6, 2022
Feb 2, 2015
Mar 6, 2022
Mar 6, 2022
Jul 22, 2016
Jun 1, 2022
Mar 6, 2022
Mar 6, 2022

Repository files navigation

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

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

About

Sync up two Flickity carousels

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 52.0%
  • HTML 48.0%