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>

还有我的 jQuery，基于 Cycle2 API：

$('.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'); });

这会为任何只有一张幻灯片（或没有）的任何人添加一个cycle-single类。.cycle-slideshow然后，您可以基于.cycle-slideshow.cycle-single例如执行 css 规则。

.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 回答