我正在使用 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>