1

jQuery Cycleを使用して、同じページに複数のスライドショーを作成しています。一部のスライドショーには、画像が1つしかありません。これらについては、次/前の画像を非表示にします。このコードが機能しない理由はわかりませんが、すべてのスライドショーのすべての子をカウントしていると思われます。この場合、各スライドショーの長さを個別に計算するために必要です。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>
4

1 に答える 1

4 
$(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'),
            });
        }
    });    
});
于 2012-04-05T06:18:06.780 に答える