Question

我正在使用Cycle2来创建博客文章的轮播。这是我成功使用的代码

<div class="slideshow cycle-slideshow" 
data-cycle-slides=">div" 
data-cycle-fx=carousel     
data-cycle-timeout=0 
data-cycle-carousel-visible=3 
data-cycle-carousel-fluid=true 
data-cycle-next="#next" 
data-cycle-prev="#prev">

当我点击下一个/上一个链接时，它会一次前进1张幻灯片。

是否可以一次前进3张幻灯片？我目前正在显示3，所以当点击下一个按钮时，我希望它显示接下来的3个帖子。

基本上我想使用Cycle2来完成这个http://www.malsup.com/jquery/cycle/div.html，而不是使用1,2,3 ......我希望它使用Next / Prev按钮。

Answer 1

将您的帖子排序为幻灯片，然后让节目浏览帖子的幻灯片。

I have a working example here：

<div class="slideShow cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="0" data-cycle-next="#next" data-cycle-prev="#prev" data-cycle-slides="> div" >
    <div>
        <img src="http://malsup.github.com/images/p1.jpg">
        <img src="http://malsup.github.com/images/p2.jpg">
        <img src="http://malsup.github.com/images/p3.jpg">
    </div>
    <div>
        <img src="http://malsup.github.com/images/p4.jpg">
    </div>
</div>
<div class="center"> 
    <a href=# id="prev">Prev</a>  
    <a href=# id="next">Next</a>
</div>

Answer 2

不要按照接受的答案中的建议，在<div> - 标签中聚集一定数量的元素！

一旦您尝试实现响应性，上面会打扰您，例如当您的窗口调整大小并且您突然想要连续显示两张图片而不是三张时。

更好的方法是简单地将点击事件绑定到#next和#prev，并将幻灯片的数量设置为相对于当前幻灯片跳转，如下所示：

$('#next').click(function(){
    $('.cycle-slideshow').cycle('goto', parseInt($('.cycle-slideshow').data("cycle.opts").currSlide + 3));  
});
$('#prev').click(function(){
    $('.cycle-slideshow').cycle('goto', parseInt($('.cycle-slideshow').data("cycle.opts").currSlide - 3));  
});

您可以从幻灯片配置中删除以下两行：

<击>

data-cycle-next="#next"
data-cycle-prev="#prev"

<击>

一旦窗口调整大小并因此网格发生变化，就应该更改步长（此处为3）。使用css媒体查询和jquery。

修改jQuery Cycle2的next / prev寻呼机

2 个答案: