Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    flickity-as-nav-forpublic

    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

    install

    npm i flickity-as-nav-for

    Downloadsweekly downloads

    755

    version

    2.0.1

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar