羣組單元格行爲 - 閃爍

我有一個輕快的旋轉木馬，我想啓用autoPlay。當傳送帶處於自動播放狀態時，我想通過groupCells: true對單元進行分組。到現在爲止還挺好。當用戶點擊上一個或下一個按鈕時，我希望滑塊僅移動1個單元格，因此當用戶單擊時，groupCells應該是false。羣組單元格行爲 - 閃爍

我的選項：

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

來源

2017-09-25 balintpekker

創建的你有什麼到目前爲止的工作示例並解釋究竟是什麼問題。這將幫助其他用戶更好地理解問題，並且您可能會更加關注此問題並可能有答案。 – Dekel

在[this]（https://codepen.io/anon/pen/pWrVKQ）示例中，將單元格分組，自動播放設置爲6s。都好。我想，如果我點擊其中一個導航箭頭，它只會向左或向右滑動一個單元格，而不是全部三個分組。 – balintpekker

這裏是我的解決方案，這是一個有點哈克但似乎工作，都可以在這裏進行測試：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>

來源

2017-10-02 19:42:24 Isma

這並不壞，但起初1-2-3單元格是分組的，如果我點擊導航向右滑動，它會滑動到2單元格。我希望它刷新分組的單元格後的第一個單元格，在這種情況下爲4.如果自動播放已打開並且已經像2次一樣滑過，並且分組的單元格是7-8-9，如果向右滑動，我希望它滑動到10. – balintpekker

@balintpekker我剛剛更新了答案，以解決我在第三組中返回時發現的錯誤。現在應該沒問題。 – Isma

羣組單元格行爲 - 閃爍

回答

相關問題