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

我已經採取Your Example over here，我已經添加以下代碼：

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