[英]Modify next/prev pager for jQuery Cycle2
I'm using Cycle2 to create a carousel of blog posts. 我正在使用Cycle2创建博客帖子的轮播。 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. 当我单击下一个/上一个链接时,它每次前进1张幻灯片。
Is it possible to make it advance 3 slides at a time? 是否可以一次前进3张幻灯片? I am currently showing 3, so when clicking the next button I want it to show the next 3 posts. 我当前正在显示3,所以当单击“下一步”按钮时,我希望它显示接下来的3个帖子。
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. 基本上,我想使用Cycle2完成此http://www.malsup.com/jquery/cycle/div.html,而不是使用1、2、3 ...,我希望它使用Next / Prev按钮。
Sort your posts into slides and then have the show go through the slides of posts. 将您的帖子分类为幻灯片,然后让演示通过帖子幻灯片。
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>
Don't cluster a certain number of elements in <div>
-tags as suggested in the accepted answer! 不要按照接受的答案中的建议,在<div>
-tags中聚集一定数量的元素!
Above will bother you once you try to implement responsiveness, such as for example when your window gets resized and you suddenly want to display two pictures in a row and not three. 一旦您尝试实现响应性,例如当您调整窗口大小并且突然想连续显示两张图片而不是三张图片时,上面的内容就会困扰您。
A better approach is to simply bind a click event to your #next
and #prev
and set the number of slides to jump relatively to the current slide as follows: 更好的方法是简单地将click事件绑定到您的#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));
});
You may delete the following two lines from your slideshow configuration: 您可以从幻灯片显示配置中删除以下两行:
data-cycle-next="#next" data-cycle-prev="#prev"
The step size (here 3) should be changed once your window resizes and therefore your grid changes. 窗口调整大小后,应更改步长(此处为3),因此网格也会更改。 Use css media queries and jquery for that. 为此使用css媒体查询和jquery。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.