Bootstrap : carousel o carrusel

Fecha Publicación:       15 de Diciembre de 2022
Fecha Modificación:       16 de Diciembre de 2022

Carousel de Bootstrap es un componente de presentación de diapositivas para recorrer elementos (imágenes o diapositivas de texto) como un carrusel.

→ Ir a la Página oficial de Bootstrap Carousel en español 

Intervalo individual .carousel-item

Agrega   data-bs-interval=""    a   .carousel-item   para cambiar la cantidad de tiempo de retraso entre el ciclo automático al siguiente elemento.

https://getbootstrap.com/docs/5.0/components/carousel/#individual-carousel-item-interval

<div class="carousel-inner">
    <div class="carousel-item active" data-bs-interval="10000">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item" data-bs-interval="2000">
      <img src="..." class="d-block w-100" alt="...">
    </div>

Pausar el carrusel bootstrap5

https://github.com/twbs/bootstrap/discussions/35673

const myCarousel = document.getElementById('myCarousel');

  myCarousel.addEventListener('slide.bs.carousel', event => {
    //some custom code here, any time the carousel changes
  });

  //pause the Carousel
  jQuery("#mybuttonorsomethingelse").on('myevent', function () {
    var carousel = bootstrap.Carousel.getInstance(myCarousel) // Retrieve a Carousel instance
    carousel.to(<someindex>); //Cycles the carousel to a particular frame (0 based, similar to an array)
    carousel.pause(); //pause the carousel
  });

  //play the carousel
  jQuery("#mybuttonorsomethingelse").on('myotherevent', function () {
    var carousel = bootstrap.Carousel.getInstance(myCarousel) // Retrieve a Carousel instance
    carousel.cycle(); //play the carousel
  });

 

https://codepen.io/alextutor/pen/Vwdoqvr

Diferencia Bootstrap Carousel  v4  y  v5 

Bootstrap 4 Bootstrap 5

https://getbootstrap.com/docs/5.0/components/carousel/#individual-carousel-item-interval
data-interval


<div id="carousel" class="carousel slide hero-slides" data-ride="carousel" data-pause="hover" data-interval="5000">









data-bs-interval

Agregando al contenedor General

<div id="carousel" class="carousel slide hero-slides" data-ride="carousel" data-pause="hover" data-bs-interval ="5000">

Tambien se pude agregar a cada slider 

<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="..." class="d-block w-100" alt="...">
</div>

#carousel .carousel-item .caption { #carousel .carousel-caption {
#carousel .caption h2 { #carousel .carousel-caption h2 
#carousel .caption p #carousel  .carousel-caption p 
   

 

Mas ejemplos  Carousel de  Bootstrap

https://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

 

Articulo : 988 - Veces Leidas
Compartir Articulo:
×

¡Apóyame suscribiéndote a mi canal!

Tutoriales sobre Diseño Web