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