javascript - 別のナビゲーションとしての 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
      }
    });

prevNextButtonsforをクリックすると、.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();
        });