Rough carousel as a navigation for another

Question

So, I use this https://codepen.io/desandro/pen/wByaqj

And I activated prevNextButtons: true,as follows:

$('.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, when I click on prevNextButtonsto .characters-navto automatically select an item from .characters-main.

Here's how it works now:

Answer 1

I took your example here and I 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 something 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();
        });

Answer 2

Try using the following code. I used the flickity event "select". You can also try to settle.

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