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