Flickity Mimic
Mimicry extension for Metafizzy’s Flickity. Let’s Flickity instances mimic real-time interactions of another.
Demo ☞ hydnhntr.github.io/flickity-mimic/
- Real-time dragging and navigation actions replicated
indexOffset
option to set the mimic ahead or behind the target’sselectedIndex
- No 2 way binding/sync compatibility, see Flickity Sync instead
- Intended to work with
dragging
andaccessibility
options set tofalse
. - No support for
groupCells
option, requires matching cell counts and works best withwrapAround: true
Next up
- Support different cell widths and
cellAlign
option.
Usage
......
// mimic options object to be supplied as nameValuePair on Flickity configmimic:target: '.gallery-a'// set as a selector string or HTMLElement `document.querySelector('.gallery-a')`, `jQuery('.gallery-a')[0]`indexOffset: 1// Integer, defaults to 0
jQuery
;;
Vanilla JS
var flktyA = '.gallery-a';var flktyB = '.gallery-b'wrapAround: truedraggable: falseaccessibility: falsemimic:target: '.gallery-a'indexOffset: 1;
HTML
......
Install
npm: npm install flickity-mimic
RequireJS or Browserify
Untested, but should work as per Flickity’s existing plugins: asNavFor, sync. If not, I’ve goofed.
MIT license
By Hayden Hunter, built upon the hard yards by Metafizzy