减少 Bootstrap 图像滑块中图像转换之间的时间间隔答案

【问题标题】：Decreasing time interval between image transition in Bootstrap image slider减少 Bootstrap 图像滑块中图像转换之间的时间间隔
【发布时间】：2013-09-15 06:30:22
【问题描述】：

实际上，我是 bootstrap 的新手，我的任务是减少 UI 中图像更改之间的时间间隔。

然后我发现它是通过引导图像滑块发生的。然后我搜索了这个但找不到任何东西。我想缩短图像转换之间的时间间隔。

<div class="carousel slide auto" id="c-slide" >
   <ol class="carousel-indicators out">
      <li data-target="#c-slide" data-slide-to="0" class="active"></li>
      <li data-target="#c-slide" data-slide-to="1" class=""></li>
      <li data-target="#c-slide" data-slide-to="2" class=""></li>
      <li data-target="#c-slide" data-slide-to="3" class=""></li>
      <li data-target="#c-slide" data-slide-to="4" class=""></li>
   </ol>
   <div class="carousel-inner">
      <div class="item">
         <p class="text-center bg-inverse">
            <img src="images/sfk_splash1.jpg" alt="" border="0">
         </p>
      </div>
      <div class="item active">
         <p class="text-center bg-inverse">
            <img src="images/sfk_splash2.jpg" alt="" border="0">
         </p>
      </div>
      <div class="item">
         <p class="text-center bg-inverse">
            <img src="images/sfk_splash3.jpg" alt="" border="0">
         </p>
      </div>
      <div class="item">
         <p class="text-center bg-inverse">
            <img src="images/sfk_splash4.jpg" alt="" border="0">
         </p>
      </div>
      <div class="item">
         <p class="text-center bg-inverse">
            <img src="images/sfk_splash5.jpg" alt="" border="0">
         </p>
      </div>
   </div>
   <a class="left carousel-control" href="#c-slide" data-slide="prev">
   <i class="icon-chevron-left"></i>
   </a>
   <a class="right carousel-control" href="#c-slide" data-slide="next">
   <i class="icon-chevron-right"></i>
   </a>
</div>

【问题讨论】：

有机会看到一些代码吗？
很难相信你没有偶然发现the only 2 params the doc offers :))
@NikhilAgrawal 不允许显示应该在 MIT 许可下的代码？我们说的是引导滑块的相关代码，而不是您的绝妙机密代码...
@all 我想通了。您可以使用 data-interval 属性。

标签： jquery css twitter-bootstrap user-interface

【解决方案1】：

这里是改变slider(carousel)时间间隔的代码，它的jquery代码，你可以改变间隔

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('#mycarousel').carousel({
                interval: 3000
            });
        });
    });
</script>

【讨论】：

【解决方案2】：

$(document).ready(function () {
    $(function () {
        $('#mycarousel').carousel({
            interval: 2000
        });
    });
});

【讨论】：

【解决方案3】：

现在我根据我的要求得到了答案。有两种方法可以执行此任务

使用 jQuery

您可以使用这些 jquery 函数更改间隔。

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('#c-slide').carousel({
                interval: 5000 // Here you can specify your time interval
            });
        });
    });
</script>

不使用 jQuery

您只能使用 data-interval 属性直接在 html 中指定。像这样

<div class="carousel slide auto" id="c-slide" data-interval="2000"> // In this I have set value 2000 miliseconds

没有必要使用jQuery来改变时间间隔，这就是我正在寻找的方式。

您可以阅读这篇文章：http://getbootstrap.com/2.3.2/javascript.html#carousel

【讨论】：