web-dev-qa-db-de.com

Wie kann ich die Intervallzeit auf dem Bootstrap-Karussell ändern?

Ich habe ein Bootstrap-Karussell auf meiner Webseite. Ich versuche das Zeitintervall zwischen den einzelnen Folien zu erhöhen. Die voreingestellte Verzögerung von 5000 Millisekunden ist zu schnell, ich brauche etwa 10 Sekunden.

29
Alan

Sie können die Optionen beim Initialisieren des Karussells wie folgt verwenden:

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

oder Sie können das interval-Attribut direkt für den HTML-Tag verwenden:

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

Der Vorteil des letzteren Ansatzes ist, dass Sie dafür keine JS schreiben müssen. Der Vorteil des ersteren ist, dass Sie das Intervall berechnen und es zur Laufzeit mit einem variablen Wert initialisieren können.

72
ochi

Sie können auch das Datenintervall-Attribut verwenden, z. <div class="carousel" data-interval="10000">

114
Deryck
        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>
5
Ali Umair

Um dies zu vermeiden, können Sie das Datenintervallattribut wie folgt hinzufügen oder ändern:

<div data-ride="carousel" class="carousel slide" data-interval="10000" id="myCarousel">

Es wird in ms angegeben, wie normalerweise in js, also 1000 = 1s, 3000 = 3s ... 10000 = 10s.

Sie können sie übrigens auch auf 0 festlegen, damit sie nicht automatisch verschoben wird. Dies ist beispielsweise beim Anzeigen von Produktbildern auf dem Handy hilfreich.

<div data-ride="carousel" class="carousel slide" data-interval="0" id="myCarousel">
3
JoelBonetR

Sie können einfach das data-interval-Attribut der carousel-Klasse verwenden.

Der Standardwert ist data-interval="3000", dh 3 Sekunden.

Sie müssen lediglich die gewünschten Anforderungen einstellen.

0
Tahir77667