Question

我正在尝试调整bootstrap滑块的延迟时间。我该如何调整呢？

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

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

任何帮助都将不胜感激。

Answer 1

Bootstrap JS＆＃39; 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>

如何调整Bootstrap Carousel Slide Delay

1 个答案: