So, I'm using this

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:

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:

• javascript
• jquery
• slider
• flickity

Share Improve this question Follow asked Nov 11, 2017 at 17:57 LuTzLuTz 1,52311 gold badge1515 silver badges2525 bronze badges 2

• it will be better if you share with your work via fiddle or codepen. – mlimon Commented Nov 18, 2017 at 6:13
• Share your HTML code – Makarand Patil Commented Nov 18, 2017 at 8:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5 +50

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

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