Question

我有一个轻微的轮播，我想启用autoPlay。当轮播在自动播放时，我想通过groupCells: true对单元格进行分组。到现在为止还挺好。当用户点击上一个或下一个按钮时，我希望滑块仅移动一个单元格，因此当用户点击时，groupCells应为false。

我的选择：

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

Answer 1

这是我的解决方案，它有点hacky但似乎有用，可以在这里测试：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>

组细胞行为 - 闪烁

1 个答案: