如果只有一張幻燈片使用jQuery Cycle2插件隱藏「下一張/上一張」導航

在幻燈片中只有一張幻燈片的情況下，我想隱藏正在生成的「下一張」控制按鈕（.cycle-next）由data-cycle-next屬性。我目前似乎沒有工作。如果只有一張幻燈片使用jQuery Cycle2插件隱藏「下一張/上一張」導航

我有以下的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的基礎上，循環2 API：

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

這裏是一個fiddle。

任何人都可以確定問題可能是什麼，或建議使用另一種解決方案？謝謝。

來源

2013-04-02 Sam Baldwin

是這樣的東西你在找什麼？您可以使用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/

來源

2013-04-02 09:24:35 tpbowden

這工作完美。非常感謝。 –

您可以通過.length找到img的數量，然後隱藏下一個按鈕。

check this fiddle

來源

2013-04-02 09:23:53 crazyrohila

這也完美的作品，但我看到@ Bogieman的回答第一和測試的。非常感謝。 –

下面是我用於循環2幻燈片與div的一種替代方案：

// 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-23 17:49:03 Skrivener

在這裏，你需要添加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); 
     } 
    });

來源

2015-05-25 04:20:10

如果只有一張幻燈片使用jQuery Cycle2插件隱藏「下一張/上一張」導航

回答

相關問題