Enable asNavFor for Flickity
HTML JavaScript
Latest commit b0d8c81 Jul 21, 2016 @desandro desandro πŸ›  better select when main is grouped
+ select center cell when grouped
+ fix AMD definition

Ref metafizzy/flickity#419
Permalink
Failed to load latest commit information.
sandbox πŸ›  better select when main is grouped Jul 21, 2016
test πŸ›  better select when main is grouped Jul 21, 2016
.gitignore Initial commit; fork from flickity-sync; v0.1.0 Feb 7, 2015
README.md
as-nav-for.js πŸ›  better select when main is grouped Jul 21, 2016
bower.json
package.json πŸ›  better select when main is grouped Jul 21, 2016

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