Enable mimicry option for Metafizzy’s Flickity
npm install flickity-mimic---
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
+ Support different cell widths and cellAlign option.
`` html`
...
...
` jsdocument.querySelector('.gallery-a')
// mimic options object to be supplied as nameValuePair on Flickity config
mimic: {
target: '.gallery-a'
// set as a selector string or HTMLElement , jQuery('.gallery-a')[0]
indexOffset: 1
// Integer, defaults to 0
}
`
` js`
$('.gallery-a').flickity();
$('.gallery-b').flickity({
wrapAround: true,
draggable: false,
accessibility: false,
mimic: {
target: '.gallery-a',
indexOffset: 1
}
});
` 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
...
data-flickity='{
"wrapAround": true,
"draggable": false,
"accessibility": false,
"mimic": {
"target": "#carousel-a",
"indexOffset": 1
}
}'>
...
Install
npm:
npm install flickity-mimic`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