Flickity轮播作为另一个导航

时间:2017-11-11 17:57:26

标签: javascript jquery slider flickity

所以,我正在使用这个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的{​​{1}}时,会自动从.characters-nav中选择元素。

这就是现在的工作方式:

enter image description here

2 个答案:

答案 0 :(得分:3)

我已经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();
        });

答案 1 :(得分:1)

请尝试使用以下代码。我使用了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 );
    }
});