Flickity carousel as navigation for another

Question

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:

it will be better if you share with your work via fiddle or codepen. — mlimon, Nov 18 '17 at 06:13

BASEER HAIDER JAFRI · Accepted Answer · 2017-11-20T16:01:37.783

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

This actually works, I also found a fix for this by activating ``prevNextButtons`` on ``.characters-main`` and editing the buttons position from css. — LuTz, Nov 21 '17 at 10:07
It does work thanks, but still issue exists if you are on second slide of nav slider. If you click on previous arrow it doesn't change slide. Same issue with last nav slide. — raju, May 09 '18 at 11:32

score 1 · Answer 2 · answered Nov 16 '17 at 06:14

Please try to use following code. I used flickity event 'select'. You can try settle as well.

var $carousel2 = $('.characters-main').flickity({
    prevNextButtons: false,
    wrapAround: false,
    pageDots: false,
    autoPlay: 10000
});

var $carousel = $('.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
    }
});
$carousel.on( 'select.flickity', function(event, pointer, cellElement, cellIndex) {
    if ( typeof cellIndex == 'number' ) {
        $carousel2.flickity( 'select', cellIndex );
    }
});

It doesn't work. When I'm using the arrows buttons to navigate the thing bellow won't change. That's the problem, see the gif. — LuTz, Nov 17 '17 at 12:19

Flickity carousel as navigation for another

2 Answers2