Enables asNavFor
option for Flickity, where one gallery is navigation or another.
- Clicking the nav gallery will select the content gallery
- Selecting the content gallery will sync to the nav gallery
<div class="gallery gallery-a">
...
</div>
<div class="gallery gallery-b">
...
</div>
// options
asNavFor: '.gallery-a'
// set as a selector string
asNavFor: document.querySelector('.gallery-a')
// set as an element
$('.gallery-a').flickity();
$('.gallery-b').flickity({
asNavFor: '.gallery-a'
});
var flktyA = new Flickity('.gallery-a');
var flktyB = new Flickity( '.gallery-b', {
asNavFor: '.gallery-a'
});
<div class="gallery gallery-a js-flickity">
...
</div>
<div class="gallery gallery-b js-flickity"
data-flickity-options='{ "asNavFor": ".gallery-a" }'>
...
</div>
as-nav-for.js
is included with the Flickity pkgd.js
files. If you are using those, you do not need to install.
Bower: bower install flickity-as-nav-for --save
npm: npm install flickity-as-nav-for
requirejs( [ 'path/to/flickity-as-nav-for/as-nav-for' ], function( Flickity ) {
var flktyA = new Flickity('.gallery-a');
var flktyB = new Flickity( '.gallery-b', {
asNavFor: '.gallery-a'
});
});
var Flickity = require('flickity-as-nav-for');
var flktyA = new Flickity('.gallery-a');
var flktyB = new Flickity( '.gallery-b', {
asNavFor: '.gallery-a'
});
MIT license
By Metafizzy