Карусель Flickity как навигация для другого

Question

Итак, я использую этот https://codepen.io/desandro/pen/wByaqj

И я активировал prevNextButtons: true, как это:

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

Я хочу, чтобы, когда я нажимаю на prevNextButtons за .characters-nav автоматически выбрать элемент из .characters-main,

Вот как это работает сейчас:

Answer 1

Я взял Ваш пример здесь и добавил следующий код:

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

В вашем случае это должно быть так:

         // 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

Пожалуйста, попробуйте использовать следующий код. Я использовал событие flickity 'select'. Вы также можете попытаться обосноваться.

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