1

スライドショーにスライドが 1 つしかない場合、属性.cycle-nextによって生成される「次へ」コントロール ボタン ( ) を非表示にしたいと考えています。data-cycle-next現時点では機能していないようです。

次の HTML があります (imgさまざまなスライド数でテストするには、タグのコメントを外すだけです)。

<div class="cycle-slideshow" 
   data-cycle-timeout="0" 
   data-cycle-next=".cycle-next" 
   >
   <img src="http://placehold.it/250x250" />
   <!--<img src="http://placehold.it/350x250" />-->
   <!--<img src="http://placehold.it/450x250" />-->
</div>
<div class="cycle-next">Next</div>

そして、Cycle2 APIに基づく私の jQuery :

$('.cycle-slideshow').on('cycle-initialized', function (e, opts, API) {
    if (opts.slideCount == 1) {
        $(".cycle-next").css("display", "none");
    }
});

ここにもフィドルがあります。

問題が何であるかを特定したり、使用する別の解決策を提案したりできますか? ありがとう。

4

4 に答える 4

3

このようなものをお探しですか？要素のlength属性を次のように使用できます。divchildren

var slides = $('.cycle-slideshow').children().length;
if(slides <= 1) {
    $('.cycle-next').css("display", "none");
} else {
    $('.cycle-next').css("display", "visible");
}
$('.cycle-slideshow').on('cycle-initialized', function (e, opts, API) {});

例: http://jsfiddle.net/MCWvA/4/

于 2013-04-02T09:24:35.253 に答える
2

でimgの数を見つけて.length、次のボタンを非表示にすることができます。

このフィドルをチェックしてください

于 2013-04-02T09:23:53.537 に答える
1

div を使用した Cycle2 スライドショーに使用した別の方法を次に示します。

// flag slideshows with only a single slide by adding a "cycle-single" class
$('.cycle-slideshow').each(function( i ) { if( $(this).children('.cycle-slide').not('.cycle-sentinel').length <= 1 ) $(this).addClass('cycle-single'); });

これにより、スライドが 1 つしかない (またはスライドがない) cycle-singleany にクラスが追加されます。次に、たとえば.cycle-slideshowに基づいてcssルールを実行できます。.cycle-slideshow.cycle-single

.cycle-slideshow.cycle-single + .cycle-next {
  display: none;
}

OPの場合。構文が一貫している限り、これはページごとに複数のスライダーに対して正常に機能するはずです。

于 2013-09-23T17:49:03.007 に答える
0

ここで、コードに ID = slideshow を追加する必要があります:

 <div id="slideshow" class="cycle-slideshow" 
       data-cycle-timeout="0" 
       data-cycle-next=".cycle-next" 
       >
       <img src="http://placehold.it/250x250" />
       <!--<img src="http://placehold.it/350x250" />-->
       <!--<img src="http://placehold.it/450x250" />-->
    </div>
    <div class="cycle-next">Next</div>

次に使用します：

   $('#slideshow').on('cycle-initialized', function (e, opts) {
        if (opts.slideCount <= 1) {
            $(".cycle-next").css("opacity", 0);
        }
    });
于 2015-05-25T04:20:10.843 に答える