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

225

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

Ü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.

Ü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 ...

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