我一直在使用 Cycle 2 插件,特别是这个例子:http://jquery.malsup.com/cycle2/demo/caro-pager.php
我已经在本地得到了这个,我想更改它,以便我可以选择如果需要的话,拥有数字寻呼机,这样我就可以同时拥有下一个/上一个和寻呼机,或者只是隐藏一个并使用其他。
问题是如果你看看我设置的例子; http://jsfiddle.net/ZYEbT/ - 您将能够看到,由于轮播上的 data-allow-wrap="false"
属性,分页器无法正确显示,但是删除此属性会破坏可点击的轮播图像,但会显示所有内容寻呼机链接的。
是否可以让下一个和上一个与寻呼机一起工作?
我的 HTML:
<div id="slideshow-1">
<div id="cycle-1" class="cycle-slideshow"
data-cycle-slides="> div"
data-cycle-timeout="0"
data-cycle-caption="#slideshow-1 .custom-caption"
data-cycle-fx="fade"
>
<div><img src="http://jquery.malsup.com/cycle2/images/beach1.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach2.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach3.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach4.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach5.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach6.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach7.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach8.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach9.jpg"></div>
</div>
</div>
<div id="carousel">
<div id="cycle-2" class="cycle-slideshow"
data-cycle-slides="> div"
data-cycle-timeout="0"
data-cycle-prev="#carousel .cycle-prev"
data-cycle-next="#carousel .cycle-next"
data-cycle-fx="carousel"
data-allow-wrap="false"
data-cycle-pager="#custom-pager"
data-cycle-pager-template="<span><a href=#> {{slideNum}} </a></span>"
>
<div><img src="http://jquery.malsup.com/cycle2/images/beach1.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach2.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach3.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach4.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach5.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach6.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach7.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach8.jpg"></div>
<div><img src="http://jquery.malsup.com/cycle2/images/beach9.jpg"></div>
</div>
<a href="#" class="cycle-prev">« prev</a>
<a href="#" class="cycle-next">next »</a>
</div>
<div id="custom-pager" class="center"></div>
jQuery:
jQuery(document).ready(function($){
var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
// advance the other slideshow
slideshows.not(this).cycle('goto', opts.currSlide);
});
$('#cycle-2 .cycle-slide').click(function(){
var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
slideshows.cycle('goto', index);
});
});
如果我遗漏了任何内容,请告诉我您需要查看什么。
最佳答案
我想我已经弄清楚了,如果我遗漏了什么,请告诉我。
首先,您应该将寻呼机放在主幻灯片中。然后,除了使用cycle-next Cycle-prev
事件之外,还添加此事件。它将在寻呼机激活时运行,并将两个幻灯片移至正确的幻灯片。
var slideshows2 = $('.cycle-slideshow').on('cycle-pager-activated', function(e, opts) {
// advance the other slideshow
slideshows2.not(this).cycle('goto', opts.currSlide);
});
这是一个更新的 fiddle ,显示了它的实际效果:Fiddle
关于使用寻呼机和下一个/上一个链接的 jQuery Cycle 2 轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19379069/