1
jQuery Cycleを使用して、同じページに複数のスライドショーを作成しています。スライドショーの一部には1つの画像しかありません。これらのために、私は次の/前のイメージを隠したいと思います。なぜこのコードがうまくいかないのか分かりませんが、私はすべてすべてのスライドショーの子を数えていると思います。この場合、スライドショーの長さを個別に計算する必要があります。 JSFiddle herejQueryサイクル:複数のスライドショー、個々の子をカウントする
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>