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?

Risposte:


225

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

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

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

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


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.


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!


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">

7

Si prega di provare quanto segue:

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

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.