Verhindern, dass das Twitter-Bootstrap-Karussell beim Laden der Seite automatisch verschoben wird

119

Gibt es also eine Möglichkeit, das automatische Verschieben des Twitter-Bootstrap-Karussells beim Laden der Seite zu verhindern, sofern nicht auf die nächste oder vorherige Schaltfläche geklickt wird?

Vielen Dank

jquery twitter-bootstrap carousel Tepken Vannkorn
quelle

Antworten:

263

Wenn Sie Bootstrap 3.0 verwenden, können Sie den Zyklus beispielsweise mit data-interval = "false" stoppen

<div id="carousel-example-generic" class="carousel slide" data-interval="false">

Weitere hilfreiche Karusselldatenattribute finden Sie hier -> http://getbootstrap.com/javascript/#carousel-usage

Michal Kopec
quelle
4
Dies ist nicht zu 100% die Antwort auf die Frage, da sie das Radfahren auch dann verhindert, wenn auf eine Schaltfläche geklickt wird. Aber es war genau das, wonach ich gesucht habe. Also trotzdem danke!
Tillito
3
data-interval="false"funktioniert auch mit Bootstrap 4
Ionuț Ciuta
53

Eigentlich ist das Problem jetzt gelöst. Ich habe das Argument 'pause' wie folgt zu der Methode 'carousel' hinzugefügt:

$(document).ready(function() {      
   $('.carousel').carousel('pause');
});

Wie auch immer, vielen Dank @Yohn für Ihre Tipps zu dieser Lösung.

Tepken Vannkorn
quelle
7
Dies wird nach prev / next abrutschen. Schauen Sie sich stackoverflow.com/a/18208327/463065 an, wenn Sie nicht danach suchen.
Trufa
für eine spezifischere wäre $(function(){ $("#idName").carousel('pause'); });
Roger
43

Das Problem, dass das Karussell nach dem Drücken der vorherigen / nächsten Taste automatisch rutscht, ist behoben. 

$('.carousel').carousel({
    pause: true,
    interval: false
});

GitHub Commit 78b927b

Srnux
quelle
17

Wenn Sie Bootstrap 3 verwendendata-interval="false" die HTML-Struktur des Karussells ein

Beispiel: 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
marciocst
quelle
10
  • Verwenden Sie data-interval="false"diese Option , um das automatische Schieben zu stoppen
  • Verwenden Sie data-wrap="false"diese Option , um die kreisförmige Folie anzuhalten
Anil Ram
quelle
10

füge dies deinem coursel div hinzu:

data-interval="false"
Dylan B.
quelle
Michael Kopecs Antwort von vor 2 Jahren sagt dies bereits.
Alle Arbeiter sind essentiell
5

Unten finden Sie eine Liste der Parameter für das Bootstrap-Karussell. Wie Intervall, Pause, Wrap:

Geben Sie hier die Bildbeschreibung ein

Weitere Details finden Sie unter diesem Link:

http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

Hoffe das wird dir helfen :)

Hinweis: Dies ist eine weitere Hilfe. Ich meine, wie Sie das Standardverhalten anpassen oder ändern können, sobald das Karussell geladen ist.

Vikash Pandey
quelle
2

Ich denke, vielleicht sollten Sie die offiziellen Anweisungen zum Karussell lesen. Für mich habe ich oben keine Antwort gefunden. Aufgrund mehrerer Bootstrap-Versionen verwende ich b4-alpha und möchte, dass der Autoplay-Effekt gestoppt wird. 

$(document).ready({
    pause:true,
    interval:false
});

Dieses Skript hat keine Auswirkung, wenn die Maus diese Seite verlässt, genau den Karussellbereich. Gehen Sie zur offiziellen Definition und finden Sie diese:

Geben Sie hier die Bildbeschreibung ein

Wenn Sie also ein Ereignis auslösen, wird die Seite angehalten, während die Maus von dieser Seite entfernt wird, wird sie wieder fortgesetzt.

Wenn Sie also möchten, dass eine Seite für immer stoppt und manuell gedreht wird , können Sie sie einfach festlegen data-interval='false'.

Crabime
quelle
1

- Verwenden Sie data-interval = "false", um die automatische Folie zu stoppen. - Verwenden Sie data-wrap = "false", um die kreisförmige Folie zu stoppen

...
Anil Kumar Ram
quelle
1

Für Bootstrap 4 entfernen Sie einfach das 'data -ritt = "Karussell"' aus dem Karussell div. Dadurch wird die automatische Wiedergabe beim Laden entfernt.

Um die automatische Wiedergabe wieder zu aktivieren, müssten Sie immer noch den Aufruf "Wiedergabe" in Javascript verwenden.

James
quelle