如何延迟每个项目的bootstrap轮播？

Question

我对每个项目都有data-delay属性，如果我的第一个项目有data-delay="10"，那么我想延迟我的项目，然后延迟我的项目10秒，或者我的第二项属性是{{1}比延迟我的项目20秒是可能的吗？

20

Answer 1

如果更改每张幻灯片的间隔，则可以获得此功能。

https://jsfiddle.net/9nkLousp/1/

function slide() {
  $(this).carousel({
    interval: $(this).find(".item.active").data("delay") * 1000
  });
}

slide.bind($('#carousel'))();
$('#carousel').on('slid.bs.carousel', slide)

此外，我添加了一个轮播ID：

<div id="carousel" class="carousel slide" data-ride="carousel">