如何更改bootstrap轮播的间隔时间？

Question

我的网页上有一个bootstrap轮播,我正在尝试增加每张幻灯片之间的时间间隔.默认延迟5000毫秒太快,我需要大约10秒.

Answer 1

您还可以使用data-interval属性,例如. <div class="carousel" data-interval="10000">

Answer 2

初始化轮播时可以使用这些选项,如下所示:

// interval is in milliseconds. 1000 = 1 second -> so 1000 * 10 = 10 seconds
$('.carousel').carousel({
  interval: 1000 * 10
});

或者您可以interval直接在HTML标记上使用该属性,如下所示:

<div class="carousel" data-interval="10000">

后一种方法的优点是你不必为它编写任何JS - 而前者的优点是你可以计算间隔并在运行时用变量值初始化它.

Answer 3

        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>

Answer 4

摆脱它的最好方法是添加或修改 data-interval 属性，如下所示：

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

它在 ms 上指定，就像它通常在 js 上一样，所以 1000 = 1s，3000 = 3s ... 10000 = 10s。

顺便说一句，您也可以将其指定为 0 以不自动滑动。例如，在移动设备上显示产品图片时很有用。

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