README

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’s selectedIndex
No 2 way binding/sync compatibility, see Flickity Sync instead
Intended to work with dragging and accessibility options set to false.
No support for groupCells option, requires matching cell counts and works best with wrapAround: true

Next up

Support different cell widths and cellAlign option.

Usage

<div class="gallery gallery-a">
  ...
</div>
<div class="gallery gallery-b">
  ...
</div>

// mimic options object to be supplied as nameValuePair on Flickity config
mimic: {
  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

$('.gallery-a').flickity();
$('.gallery-b').flickity({
  wrapAround: true,
  draggable: false,
  accessibility: false,
  mimic: {
    target: '.gallery-a',
    indexOffset: 1
  }
});

Vanilla JS

var flktyA = new Flickity('.gallery-a');
var flktyB = new Flickity( '.gallery-b', {
  wrapAround: true,
  draggable: false,
  accessibility: false,
  mimic: {
    target: '.gallery-a',
    indexOffset: 1
  }
});

HTML

<div class="gallery gallery-a js-flickity">
  ...
</div>
<div class="gallery gallery-b js-flickity"
  data-flickity='{
    "wrapAround": true,
    "draggable": false,
    "accessibility": false,
    "mimic": {
      "target": "#carousel-a",
      "indexOffset": 1
    }
  }'>
  ...
</div>

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

Usage no npm install needed!