Carrusel de Bootstrap 4
Carrusel de Bootstrap 4
El carrusel es una presentación de diapositivas para recorrer los elementos.
Cómo crear un carrusel
El siguiente ejemplo muestra cómo crear un carrusel básico con indicadores y controles:
Ejemplo
<div id="demo" class="carousel slide" data-ride="carousel">
<!--
Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li
data-target="#demo" data-slide-to="2"></li>
</ul>
<!--
The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg"
alt="Los Angeles">
</div>
<div
class="carousel-item">
<img src="chicago.jpg"
alt="Chicago">
</div>
<div
class="carousel-item">
<img src="ny.jpg"
alt="New York">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev"
href="#demo" data-slide="prev">
<span
class="carousel-control-prev-icon"></span>
</a>
<a
class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Ejemplo explicado
Una descripción de lo que hace cada clase del ejemplo anterior:
| Class | Description |
|---|---|
.carousel |
Creates a carousel |
.carousel-indicators |
Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing) |
.carousel-inner |
Adds slides to the carousel |
.carousel-item |
Specifies the content of each slide |
.carousel-control-prev |
Adds a left (previous) button to the carousel, which allows the user to go back between the slides |
.carousel-control-next |
Adds a right (next) button to the carousel, which allows the user to go forward between the slides |
.carousel-control-prev-icon |
Used together with .carousel-control-prev to create a "previous" button |
.carousel-control-next-icon |
Used together with .carousel-control-next to create a "next" button |
.slide |
Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect |
Agregar subtítulos a las diapositivas
Los Angeles
¡Lo pasamos tan bien en Los Ángeles!
chicago
¡Gracias Chicago!
Nueva York
¡Nos encanta la Gran Manzana!
Agregue elementos <div class="carousel-caption">dentro de cada uno <div
class="carousel-item">para crear un título para cada diapositiva:
Ejemplo
<div class="carousel-item">
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los
Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
Referencia completa del carrusel Bootstrap
Para obtener una referencia completa de todas las opciones, métodos y eventos del carrusel, vaya a nuestra Referencia de carrusel de Bootstrap JS .