You need to set interval in main div as data-interval tag .
so it is working fine and you can give different time to different slides.
<!--main div -->
<div data-ride="carousel" class="carousel slide" data-interval="100" id="carousel-example-generic">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class=""></li>
i>
</ol>
<!-- Wrapper for slides -->
<div role="listbox" class="carousel-inner">
<div class="item">
<a class="carousel-image" href="#">
<img alt="image" src="image.jpg">
</a>
</div>
</div>
</div>
7条答案
按热度按时间8ljdwjyq1#
您还可以使用数据间隔属性,例如
<div class="carousel" data-interval="10000">
r6hnlfcb2#
您可以在初始化转盘时使用这些选项,如下所示:
也可以直接在
HTML
标记上使用interval
属性,如下所示:后一种方法的优点是您不必为它编写任何JS-而前一种方法的优点是您可以在运行时 * 计算 * 间隔并使用变量值初始化它。
yqyhoc1h3#
摆脱它的最佳方法是添加或修改data-interval属性,如下所示:
它以ms为单位,就像通常以js为单位一样,因此1000 = 1 s,3000 = 3s...... 10000 = 10 s。
顺便说一下,你也可以指定它为0,不自动滑动。这是有用的,例如,当显示产品图像在移动的。
8yparm6h4#
k2arahey5#
您可以简单地使用
carousel
类的data-interval
属性。其默认值设置为
data-interval="3000"
,即3秒。您所需要做的就是将其设置为所需的要求。
68bkxrlz6#
您还可以更改不同的幻灯片。
idfiyjo87#
您可以在数据和间隔之间添加'bs'(data-bs-interval=“10000),这在新版本的Bootstrap上有效。