Hoạt động của tế bào nhóm - sự rung động

Question

Tôi có băng chuyền nhấp nháy và tôi muốn bật autoPlay. Khi băng chuyền đang tự động phát, tôi muốn nhóm các ô qua groupCells: true. Càng xa càng tốt. Khi người dùng nhấp vào các nút trước đó hoặc tiếp theo, tôi muốn thanh trượt chỉ di chuyển 1 ô, vì vậy khi người dùng nhấp vào, groupCells phải là false.

My Options:

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

Answer 1

Đây là giải pháp của tôi, đó là một chút hacky nhưng dường như làm việc, có thể được kiểm tra ở đây: 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>