flickity-as-nav-for

Flickity asNavFor

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

jQuery

$('.gallery-a').flickity();
$('.gallery-b').flickity({
  asNavFor: '.gallery-a'
});

Vanilla JS

var flktyA = new Flickity('.gallery-a');
var flktyB = new Flickity( '.gallery-b', {
  asNavFor: '.gallery-a'
});

HTML

<div class="gallery gallery-a js-flickity">
  ...
</div>
<div class="gallery gallery-b js-flickity"
  data-flickity-options='{ "asNavFor": ".gallery-a" }'>
  ...
</div>

Install

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

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'
  });
});

Browserify

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