3

I'm using Cycle2 to create a carousel of blog posts. Here is the code I am using successfully

<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">

When I click the next/prev links it advances 1 slide at a time.

Is it possible to make it advance 3 slides at a time? I am currently showing 3, so when clicking the next button I want it to show the next 3 posts.

Basically I want to accomplish this http://www.malsup.com/jquery/cycle/div.html using Cycle2 but instead of having 1, 2, 3... I want it to use Next/Prev buttons.

4

2 回答 2

1

将您的帖子分类成幻灯片，然后让节目通过帖子的幻灯片。

我在这里有一个工作示例：

<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>
于 2013-04-10T16:22:02.497 回答
1

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

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

更好的方法是简单地将点击事件绑定到您的#nextand#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。

于 2016-09-08T07:25:04.363 回答