如果只有一张幻灯片，则隐藏导航"Next / Previous"使用 jQuery Cycle2 插件

Question

在幻灯片中只有一张幻灯片的情况下，我想隐藏由data-cycle-next属性生成的"Next"控制按钮(.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");
    }
});

这里也有一把小提琴

谁能找出问题是什么，或者建议另一种解决方案?谢谢。

Answer 1

你在寻找这样的东西吗?您可以像这样使用div元素的children的length属性:

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/

Answer 2

您可以使用.length找到img的数量，然后可以隐藏下一个按钮。

check this fiddle

Answer 3

这是我用divs:

代替的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'); });

这将cycle-single类添加到只有一张幻灯片(或没有)的.cycle-slideshow中。然后，您可以根据.cycle-slideshow.cycle-single编写css规则，例如

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

在OP的情况下

。只要语法一致，这对于每个页面的多个滑块应该工作得很好。

Answer 4

这里你需要添加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);
        }
    });