[英]jQuery Cycle: Multiple slide shows, count individual children
我正在使用 jQuery Cycle 在同一页面上创建多个幻灯片。 一些幻灯片只有一张图片。 对于这些,我想隐藏下一张/上一张图片。 不知道为什么这段代码不起作用,但我怀疑它正在计算所有幻灯片的所有孩子。 如果是这种情况,我需要它来单独计算每个幻灯片的长度。 JSFiddle 在这里
jQuery
if ( $('.slideshow').children().length < 1 )
$(this).parent().find('.controls').hide();
else
$('.slideshow').each(function() {
var cycle = $(this),
controls = cycle.parent().find('.controls');
cycle.cycle({
timeout: 0,
speed: 'fast',
fx: 'scrollHorz',
next: controls.find('.next'),
prev: controls.find('.prev'),
before: function(curr,next,opts) {
var s = ($(next).index() + 1) + '/' + opts.slideCount;
$(opts.caption).html(s)
},
caption: cycle.parent().find('p.caption'),
});
});
HTML
<div class="container">
<ul class="slideshow">
<li><img alt="product" src="http://placehold.it/500x500" /></li>
<li><img alt="product" src="http://placehold.it/500x500" /></li>
<li><img alt="product" src="http://placehold.it/500x500" /></li>
</ul>
<div class="controls"><a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a></div>
</div>
<div class="container">
<ul class="slideshow">
<li><img alt="product" src="http://placehold.it/500x500" /></li>
</ul>
<div class="controls"><a href="#" class="prev">Prev</a> <a href="#" class="next">Next</a></div>
</div>
$(document).ready(function() {
$('.slideshow').each(function() {
if ( $(this).children().length <= 1 )
$(this).parent().find('.controls').hide();
else{
var cycle = $(this);
controls = cycle.parent().find('.controls');
cycle.cycle({
timeout: 0,
speed: 'fast',
fx: 'scrollHorz',
next: controls.find('.next'),
prev: controls.find('.prev'),
before: function(curr,next,opts) {
var s = ($(next).index() + 1) + '/' + opts.slideCount;
$(opts.caption).html(s)
},
caption: cycle.parent().find('p.caption'),
});
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.