Question

在幻灯片中只有一张幻灯片的情况下，我想隐藏由.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>

我的jQuery，基于Cycle2 API：

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

这也是fiddle。

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

Answer 1

这是你想要的东西吗？您可以使用length元素div的{{1}}属性，如下所示：

children

示例：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 =幻灯片：

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

如果只有一个幻灯片使用jQuery Cycle2插件，则隐藏“下一个/上一个”导航

4 个答案: