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
See the Pen Slider con texto animado - Bootstrap 4 carousel hero with animated caption by alex huiza (@alextutor) on CodePen.
Articulo : 988 - Veces Leidas