Wie kann ich das Bootstrap Carousel Slide Delay einstellen

Question

Ich versuche die Verzögerungszeit des Bootstrap Sliders einzustellen. Wie kann ich das einstellen?

ich nach dieser Anleitung habe, aber nicht gelungen, das Intervall zwischen den Folien einzustellen.

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

Jede Hilfe würde geschätzt.

Answer 1

Bootstrap JS des carousel Funktion nimmt in einem Objekt. Innerhalb des Objekts können Sie die Eigenschaften anpassen. Zum Beispiel das Intervall auf 1/2 Sekunde zu setzen tun, um diese

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

Werfen Sie einen Blick auf diese Schnipsel

$(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>