2012-04-05 6 views
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> 

答えて

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'), 
      }); 
     } 
    });  
});