Bootstrap-Karussell: Entfernen Sie die automatische Folie

119

Ich benutze Bootstrap Carousel. Ich möchte nur, dass der Schieberegler nur verschoben wird, wenn auf eine Navigation oder eine Paginierung geklickt wird. Ich habe versucht zu entfernen

$('.carousel').carousel({
    interval: 6000
});

Es funktioniert gut, aber mein Problem ist, wenn ich bereits auf eine Navigation oder Paginierung geklickt habe, wird es jetzt automatisch verschoben. Ist es möglich, die automatische Schiebefunktion zu entfernen? Wenn das so ist, wie?

javascript jquery twitter-bootstrap Khatzie
quelle

Antworten:

225

Sie können dies auf zwei Arten tun, über js oder html (easist)

  1. Über js
$('.carousel').carousel({
  interval: false,
});

Dadurch wird das automatische Gleiten gestoppt, da keine Millisekunden hinzugefügt wurden und das nächste Mal niemals verschoben wird.

  1. Über HTML Durch Hinzufügen data-interval="false"und Entfernendata-ride="carousel"
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

wird:

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

aktualisiert basierend auf dem Kommentar von @ webMan

Iliya Reyzis
quelle
38
data-ride="carousel"data-interval="false"
Befreien Sie
111

Aus den offiziellen Dokumenten :

Intervall Die Zeitspanne zwischen dem automatischen Durchlaufen eines Elements. Bei false wechselt das Karussell nicht automatisch.

Sie können diesen Wert entweder mit Javascript oder mithilfe eines data-interval="false"Attributs übergeben.

Diego Agulló
quelle
9
the-bootstrap
Vielen
32
data-interval="false"ist die viel bessere Lösung, keine Notwendigkeit, den Bootstrap JS zu berühren!
lxg
2
Dies funktioniert bei mir nicht. und nichts ... immer noch Autosliding
Lachezar Raychev
Dies ist in der Tat für einfache Fälle viel einfacher, aber denken Sie daran, dass es ein viel besseres Design ist, Ihre benutzerdefinierten zu verwenden scripts.jsund keine Skriptcodierung im HTML zu behalten! ;)
Cregox
55

Sie müssen Ihrem DIV-Tag lediglich ein weiteres Attribut hinzufügen:

data-interval="false"

JS muss nicht berührt werden!

Nikunj Dhimar
quelle
36

Ändern / Hinzufügen zu Datenintervall = "false" auf Karussell div

<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="false" id="myCarousel">
Arun
quelle
7

Bitte versuche folgendes:

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>
Nikit Barochiya
quelle
1
Dies ist die einzige, die zur Laufzeit mit mir über die Konsole zusammengearbeitet hat.
Bishoy Hanna
4

Datenintervall = "falsch"

Fügen Sie dies dem entsprechenden ...


quelle
3 
$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: 40000,
  });
});

Mit dem obigen Skript können Sie die Bilder automatisch verschieben

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

Durch die Verwendung des obigen Skripts auto-rotationwird blockiert, weil intervalistfalse

Nitin Anvekar
quelle