Carrusel de Bootstrap: eliminar el deslizamiento automático

119

Estoy usando Bootstrap Carousel. Todo lo que quiero es que el control deslizante solo se deslice cuando se haga clic en una navegación o una paginación. He intentado eliminar

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

Funciona bien, pero mi problema es que una vez que hice clic en una navegación o paginación, ahora se desliza automáticamente. ¿Es posible eliminar la función de deslizamiento automático? ¿Si es así, cómo?

javascript jquery twitter-bootstrap khatzie
fuente

Respuestas:

225

Puede hacer esto de 2 maneras, a través de js o html (easist)

  1. Vía js
$('.carousel').carousel({
  interval: false,
});

Eso hará que el deslizamiento automático se detenga porque no se agregaron milisegundos y nunca se volverá a deslizar.

  1. Vía Html agregando data-interval="false"y quitandodata-ride="carousel"
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

se convierte en:

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

actualizado basado en el comentario de @ webMan

Iliya Reyzis
fuente
38
deshacerse también de data-ride="carousel"... y la sintaxis correcta para inline:data-interval="false"
webMan
111

De los documentos oficiales :

intervalo La cantidad de tiempo de demora entre el ciclo automático de un elemento. Si es falso , el carrusel no circulará automáticamente.

Puede pasar este valor con javascript o usando un data-interval="false"atributo.

Diego Agulló
fuente
9
gracias por el intervalo de datos = 'falso', la opción fácil si está utilizando un the-bootstraptema en Wordpress
toto_tico
32
data-interval="false"es la solución mucho mejor, ¡no es necesario tocar el JS bootstrap!
lxg
2
Esto no me funciona <div class = "carousel slide" data-ride = "carousel" id = "carousel-ex" data-interval = "false"> <div class = "carousel-inner"> .... y nada ... todavía autodeslizante
Lachezar Raychev
De hecho, esto es mucho más simple para casos simples, pero tenga en cuenta que es un diseño mucho mejor usar su personalización scripts.jsy no mantener ningún código de script en el html. ;)
cregox
55

Solo necesita agregar un atributo más a su etiqueta DIV que es

data-interval="false"

¡no es necesario tocar JS!

Nikunj Dhimar
fuente
36

Cambiar / Agregar a intervalo de datos = "falso" en div carrusel

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

Por favor intenta lo siguiente:

<script>
    $(document).ready(function() {      
        $('.carousel').carousel('pause');
    });
</script>
Nikit Barochiya
fuente
1
Ese es el único que funcionó conmigo en tiempo de ejecución usando la consola.
Bishoy Hanna
4

intervalo de datos = "falso"

Agregue esto al div correspondiente ...


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

Al usar el script anterior, podrá mover las imágenes automáticamente

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

Al utilizar el script anterior, auto-rotationse bloqueará porque intervalesfalse

Nitin Anvekar
fuente