如何更改引导轮播的间隔时间？答案

【问题标题】：How to change the interval time on bootstrap carousel?如何更改引导轮播的间隔时间？
【发布时间】：2014-08-05 20:06:51
【问题描述】：

我的网页上有一个引导轮播，我正在尝试增加每张幻灯片之间的时间间隔。默认延迟5000毫秒太快了，我需要10秒左右。

【问题讨论】：

5000 毫秒 = 5 秒，所以使用 10000 毫秒。
你读过api吗：getbootstrap.com/javascript/#carousel-usage 设置间隔的说明就在文本中。数据属性或配置。
Carousel.VERSION = '3.2.0' Carousel.DEFAULTS = { interval: 10000, pause: 'hover', wrap: true }

标签： javascript html css twitter-bootstrap

【解决方案1】：

您也可以使用 data-interval 属性，例如。 <div class="carousel" data-interval="10000">

【讨论】：

这实际上是一种更好的方法，因为引导程序默认具有解释此功能的功能。 JavaScript 方案更适用于使用 JavaScript 指定其他参数的情况。
最好的解决方案...最重要的是如果有人使用模板并且不能在引导加载后放置此代码！！！
这实际上更适合用于更改间隔时间。
我注意到此方法存在问题。 data-interval 的间隔为 10 分钟，旋转木马根本不会滑动。适用于较小的间隔。不知道为什么。

【解决方案2】：

您可以在初始化轮播时使用选项，如下所示：

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

或者你可以直接在HTML标签上使用interval属性，像这样：

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

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

【讨论】：

出于某种原因，只有后者对我有用。谢谢。
@MindsectTeam 有很多事情在起作用。如果您需要使用它的 JS 版本，请使用minimal reproducible example 创建一个问题，我们可以尝试深入了解它。 :)

【解决方案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>

【讨论】：

【解决方案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">

【讨论】：

【解决方案5】：

您可以简单地使用carousel 类的data-interval 属性。

它的默认值设置为data-interval="3000"，即 3 秒。

您需要做的就是将其设置为您想要的要求。

【讨论】：

【解决方案6】：

       <div class="carousel-inner text-right">
                  <div class="carousel-item active text-center" id="first"  data-interval="1000" >
                    <img src="images/slide-1.gif" alt="slide-1">
                  </div>
                  <div class="carousel-item  text-center" id="second"  data-interval="2000" >
                    <img src="images/slide-2.gif" alt="slide-2">
                  </div>
                  <div class="carousel-item  text-center" id="third"  data-interval="3000" >
                    <img src="images/slide-3.gif" alt="slide-3">
                  </div>
                  <div class="carousel-item text-center" id="four"  data-interval="5000" >
                    <img src="images/slide-4.gif" alt="slide-4">
                  </div>
                </div>

您还可以更换不同的幻灯片。

【讨论】：

你可以更换不同的幻灯片