我有一个 flickity 轮播,我想启用自动播放
。当轮播处于自动播放状态时,我想通过 groupCells: true
对单元格进行分组。到目前为止,一切都很好。当用户单击上一个或下一个按钮时,我希望 slider 仅移动 1 个单元格,因此当用户单击时,groupCells
应为 false
。
我的选择:
pageDots: false,
imagesLoaded: true,
autoPlay: true,
pauseAutoPlayOnHover: false,
wrapAround: true,
groupCells: true,
selectedAttraction: 0.01
最佳答案
这是我的解决方案,它有点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>
关于jquery - 群体细胞行为——轻快,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46400436/