javascript - Carrusel de Bootstrap: Eliminar deslizamiento automático

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

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

Funciona bien, pero mi problema es que una vez que ya he hecho 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?

Respuesta #1

Puedes hacer esto de 2 maneras, vía js o html (más fácil)

Vía js

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

Eso hará que el deslizamiento automático se detenga porque no se añadieron milisegundos y nunca pasará al siguiente deslizador.

Vía Html Al agregar data-interval="false" y eliminar data-ride="carousel"

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

se convierte en :

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

actualizado según el comentario de @webMan

Respuesta #2

De la documentación oficial:

intervalo La cantidad de tiempo para retrasar entre ciclos automáticos de un ítem. Si false, el carrusel no se moverá automáticamente.

Puedes pasar este valor con JavaScript o utilizando un atributo data-interval="false".

Respuesta #3

Solo necesitas agregar un atributo más a tu etiqueta DIV que es

data-interval="false"

¡no hay necesidad de tocar JS!

Respuesta #4

Cambiar/Agregar a data-interval="false" en el div del carrusel

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

Respuesta #5

En Bootstrap v5 usa: data-bs-interval="false"