https://github.com/metafizzy/flickity-sync
Sync up two Flickity carousels
https://github.com/metafizzy/flickity-sync
Last synced: over 1 year ago
JSON representation
Sync up two Flickity carousels
- Host: GitHub
- URL: https://github.com/metafizzy/flickity-sync
- Owner: metafizzy
- Created: 2015-02-02T12:56:12.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2022-06-01T08:43:20.000Z (about 4 years ago)
- Last Synced: 2025-02-17T02:11:13.644Z (over 1 year ago)
- Language: HTML
- Homepage:
- Size: 29.3 KB
- Stars: 29
- Watchers: 4
- Forks: 6
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flickity sync
Enables `sync` option for [Flickity](https://flickity.metafizzy.co/)
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](https://codepen.io/desandro/pen/gOXEKPK).
## Install
Add `flickity-sync.js` to your scripts.
### Download
+ [flickity-sync.js](https://unpkg.com/flickity-sync@3/flickity-sync.js)
### CDN
``` html
```
### Package managers
npm: `npm install flickity-sync`
Yarn: `yarn add flickity-sync`
## Usage
### jQuery
``` js
$('.carousel-a').flickity({
sync: '.carousel-b'
});
// only need to set sync on one of the Flickity galleries
$('.carousel-b').flickity();
```
### Vanilla JS
``` js
var flktyA = new Flickity( '.carousel-a', {
sync: '.carousel-b'
});
var flktyB = new Flickity('.carousel-b');
```
### HTML
``` html
...
...
```
### Webpack
``` 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 🌈🐻](https://metafizzy.co)