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

Question

在幻灯片放映中只有一张幻灯片的情况下，我想隐藏由数据生成的“下一步”控制按钮(.cycle-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>

还有我的 jQuery，基于 Cycle2 API :

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

这是一个fiddle也是。

任何人都可以确定问题所在，或者建议使用其他解决方案吗？谢谢。

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/