Bootstrap Carousel: rimuove lo scorrimento automatico

119

Sto usando Bootstrap Carousel. Tutto quello che voglio è che il cursore scivoli solo quando si fa clic su una navigazione o un'impaginazione. Ho provato a rimuovere

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

Funziona bene ma il mio problema è che una volta che ho già fatto clic su una navigazione o impaginazione, ora scorre automaticamente. È possibile rimuovere la funzione di scorrimento automatico? Se é cosi, come?

javascript jquery twitter-bootstrap

— khatzie
fonte

225

Puoi farlo in 2 modi, tramite js o html (easist)

Via js

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

Ciò interromperà lo scorrimento automatico perché non vengono aggiunti millisecondi e non verrà mai eseguito lo scorrimento successivo.

Tramite Html Aggiungendo data-interval="false"e rimuovendodata-ride="carousel"

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

diventa:

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

aggiornato in base al commento di @ webMan

— Iliya Reyzis
fonte

38

sbarazzarsi anche di data-ride="carousel"... e della sintassi corretta per inline:data-interval="false"

— webMan

111

Dai documenti ufficiali :

intervallo La quantità di tempo di ritardo tra il ciclo automatico di un elemento. Se falso , il carosello non eseguirà automaticamente il ciclo.

Puoi passare questo valore con javascript o utilizzando un data-interval="false"attributo.

— Diego Agulló
fonte

9

grazie per il data-interval = 'false', l'opzione facile se stai usando un the-bootstraptema in Wordpress

— toto_tico

32

data-interval="false"è la soluzione migliore, non c'è bisogno di toccare il bootstrap JS!

— lxg

2

Questo non funziona per me <div class = "carousel slide" data-ride = "carousel" id = "carousel-ex" data-interval = "false"> <div class = "carousel-inner"> .... e niente ... ancora autosliding

— Raychev

Questo è davvero molto più semplice per i casi semplici, ma tieni presente che è un design molto migliore usare il tuo personalizzato scripts.jse non mantenere la codifica dello script nell'html! ;)

— cregox

55

Hai solo bisogno di aggiungere un altro attributo al tuo tag DIV che è

data-interval="false"

non c'è bisogno di toccare JS!

— Nikunj Dhimar
fonte

36

Cambia / Aggiungi a data-interval = "false" sul div carousel

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

— Arun
fonte

7

Si prega di provare quanto segue:

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>

— Nikit Barochiya
fonte

1

Questo è l'unico che ha funzionato con me in fase di esecuzione utilizzando la console.

— Bishoy Hanna

4

Dati-interval = "false"

Aggiungi questo al div corrispondente ...

3

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

Utilizzando lo script sopra, sarai in grado di spostare le immagini automaticamente

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

Utilizzando lo script precedente, auto-rotationverrà bloccato perché intervalèfalse

— Nitin Anvekar
fonte