Comportement des cellules du groupe - flickity

Question

J'ai un carrousel de flickity, et je veux activer autoPlay. Lorsque le carrousel est en lecture automatique, je veux regrouper les cellules via groupCells: true. Jusqu'ici tout va bien. Lorsque l'utilisateur clique sur les boutons précédent ou suivant, je veux que le curseur ne bouge que d'une cellule, donc lorsque l'utilisateur clique, le groupCells devrait être false.

Mes Options:

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

Answer 1

Voici ma solution, il est un peu hacky mais semble fonctionner, peut être testé ici: 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>