Enable asNavFor for Flickity
HTML JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

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