Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flickity carousel as navigation for another

So, I'm using this https://codepen.io/desandro/pen/wByaqj

And I activated the prevNextButtons: true, like this:

$('.characters-main').flickity({
      prevNextButtons: false,
      wrapAround: false,
      pageDots: false,
      autoPlay: 10000
    });
    $('.characters-nav').flickity({
      asNavFor: '.characters-main',
      cellAlign: 'right',
      prevNextButtons: true,
      contain: true,
      pageDots: false,
      arrowShape: {
        x0: 10,
        x1: 70, y1: 50,
        x2: 70, y2: 50,
        x3: 35
      }
    });

I want that, when I click on the prevNextButtons for .characters-nav to automatically select the element from .characters-main.

This is how it works now:

enter image description here

like image 282
LuTz Avatar asked Nov 11 '17 17:11

LuTz


People also ask

How do I add a Flickity slider to Shopify?

Add Flickity FilesGo to your Shopify theme code editor, scroll down to the Asset folder and create a . js file and name it flickity then create a . css file and name it flickity aswell. You should now have 2 files flickity.

What is Flickity?

Flickity is a JavaScript slider library, built by David DeSandro of Metafizzy fame. It's optimized for touch gestures, performance, and includes things like physics-based animation.

Is Flickity accessible?

You can enable and disable Flickity with CSS. watchCSS option watches the content of :after of the carousel element.

Is Flickity free?

If you are okay with this, feel free to use Flickity under the GPLv3, without purchasing a commercial license.


1 Answers

I have taken Your Example over here and I have added the following code:

 // Main div
    var flkty = new Flickity('.carousel-main');

   // Next and previous events of the navigation div
    $(".carousel-nav .next").on("click", function() {
          // Changing items of the main div
           flkty.next();
    });



 $(".carousel-nav .previous").on("click", function() {
          // Changing items of the main div
          flkty.previous();
    });

In Your Case it should be like this:

         // Your main div is characters-main
        var flkty = new Flickity('.characters-main');

       // Next and previous events of the characters-nav
        $(".characters-nav .next").on("click", function() {
              // Changing items of the main div
               flkty.next();
        });



     $(".characters-nav .previous").on("click", function() {
              // Changing items of the main div
              flkty.previous();
        });
like image 159
BASEER HAIDER JAFRI Avatar answered Sep 23 '22 10:09

BASEER HAIDER JAFRI