javascript - 如何调整 Bootstrap Carousel 滑动延迟

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 7 年前。

Improve this question

我正在尝试调整 Bootstrap slider 的延迟时间。我该如何调整？

我一直在遵循本指南，但无法调整幻灯片之间的间隔。

http://bootsnipp.com/snippets/featured/responsive-bs-carousel-with-hero-headers

如有任何帮助，我们将不胜感激。

Answer 1

Bootstrap JS 的 carousel 函数接收一个对象。在对象内部，您可以调整属性。例如，要将间隔设置为 1/2 秒，请执行以下操作

$("#myCarousel").carousel({interval: 500})

看看这个片段

$(document).ready(function(){
    // Activate Carousel
    $("#car").carousel({ interval: 500 });

    $(".item1").click(function(){ $("#car").carousel(0); });  
    $(".item2").click(function(){ $("#car").carousel(1); });     
    $(".item3").click(function(){ $("#car").carousel(2); });
    $(".item4").click(function(){ $("#car").carousel(3); });

    $(".left").click(function(){ $("#car").carousel("prev"); });
    $(".right").click(function(){ $("#car").carousel("next"); });
});

img { height: 345; width: 460; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div id="car" class="carousel slide">

    <ol class="carousel-indicators">
      <li class="item1 active"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
    </ol>

    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="http://img10.deviantart.net/e984/i/2015/287/c/5/red_dragon_by_sandara-d6hpycs.jpg" alt="Dragon 1">
      </div>

      <div class="item">
        <img src="http://orig15.deviantart.net/1f54/f/2015/345/a/4/black_dragon_v2_by_sandara-d9jtdg8.jpg" alt="Dragon 2">
      </div>

      <div class="item">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/VarnaDragons.jpg" alt="Dragon 3">
      </div>

      <div class="item">
        <img src="http://awoiaf.westeros.org/images/thumb/d/d4/Aegon_on_Balerion.jpg/450px-Aegon_on_Balerion.jpg" alt="Dragon 4">
      </div>
    </div>

    <a class="left carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>