组细胞行为 - flickity

Question

我有一个 flickity 轮播，我想启用 autoPlay。当轮播处于自动播放状态时，我想通过 groupCells: true 对单元格进行分组。到目前为止，一切都很好。当用户点击上一个或下一个按钮时，我希望滑块只移动 1 个单元格，因此当用户点击时，groupCells 应该是 false。

我的选择：

pageDots: false,
imagesLoaded: true, 
autoPlay: true, 
pauseAutoPlayOnHover: false,
wrapAround: true, 
groupCells: true,
selectedAttraction: 0.01

Answer 1

这是我的解决方案，它有点老套但似乎有效，可以在这里进行测试：https://codepen.io/anon/pen/QqajpX

<div class="carousel">
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>
<script>
    var carousel = $('.carousel').flickity({
        groupCells: true,
        autoPlay: true
    }).on( 'dragEnd.flickity', function( event, pointer ) {
        exitGroupCells();
    }).on( 'staticClick.flickity', function( event, pointer, cellElement, cellIndex ) {
        restartCarousel(cellIndex);
    });

    var flkty = carousel.data('flickity');

    flkty.prevButton.on( 'tap', function() {
      exitGroupCells(true);
    });

    flkty.nextButton.on( 'tap', function() {
      exitGroupCells();
    });

    function exitGroupCells(prev=false) {            
        if (!flkty.options.autoPlay && !flkty.options.groupCells) {
            return;
        }

        var nextCellIndex = 0;

        if (prev === true) {
            for (var i=0; i <= flkty.selectedIndex; i++) {
                nextCellIndex += flkty.slides[i].cells.length;
            }
            nextCellIndex -= 1;
        } else {
            var nextCell = flkty.slides[flkty.selectedIndex].cells[0];

            for(var i=0; i < flkty.cells.length; i++) {
                if (nextCell === flkty.cells[i]) {
                  nextCellIndex = i;
                  break;
                }
            }
        }

        restartCarousel(nextCellIndex);
    }

    function restartCarousel(nextCellIndex) {
      $('.carousel').flickity('destroy')

        $('.carousel').flickity({
            groupCells: false,
            autoPlay: false,
            initialIndex: nextCellIndex
        });
    }
</script>

组细胞行为 - flickity

Group cells behavior - flickity

jquery

flickity