Un elemento muy típico en las webs de hoy en día, sin entrar en su abuso o en su utilidad real, es el carrusel o slider, donde una serie de elementos, generalmente imágenes van pasando para que el usuario pueda verlas.

Es por eso que hay un slider en bootstrap 4 de forma «nativa» que vamos a ver hoy.

Para comenzar tenemos que crear un div con las clases carousel y slide que va a contener todo el contenido de nuestro slider. Debemos de poner también un atributo data-ride=»carousel». De forma adicional podemos colocar una id en este div para tenerlo más controlado.

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

Ahora vamos a dividir el carrusel en tres partes:

• indicadores: que son los elementos o dots del carrusel que indican en que imagen nos encontramos
• imágenes: hacen referencia a las imágenes del slider
• controles: que nos permitirán navegar por el slider

Trabajando en las partes de carrusel en bootstrap 4

Indicadores

Para trabajar en los indicadores hay que hacer una lista con la clase carusel-indicators donde cada elemento debe de apuntar con un data-target al propio slider con su id y apuntar a una imagen según el orden en el que estén las imágenes. (Recuerda que empezamos a contar a partir de 0).

Por otro lado hay que definir cual es la imagen que está activa por medio de class=»active»

<ul class="carousel-indicators">
	<li data-target="#mi_carousel" data-slide-to="0" class="active"></li>
	<li data-target="#mi_carousel" data-slide-to="1"></li>
	<li data-target="#mi_carousel" data-slide-to="2"></li>
</ul>

Imágenes

En esta sección es donde van las imágenes dispuestas, para ello es recomendable que todas tengan el mismo tamaño.

En esta sección todos los elementos están envueltos por un div con la clase carousel-inner y es en su interior donde vamos a introducir nuestros slides.

Los slides

Cada item de un carrusel en bootstrap4  se compone de un div con la clase carousel-item y active solo si es la imagen que está activa al principio

Aquí es donde viene nuestra imagen, pero ojo que podemos poner más elementos como un titulo con su descripción para dar más fuerza a lo que queremos representar en el slide.

Para ello introducimos un div con la clase carousel-caption y en su interior pues lo que consideremos oportuno. En el ejemplo he puesto un título en h3 y un párrafo con p.

<div class="carousel-inner ">
	<div class="carousel-item active">
		<img src="img/p1.jpg" class="img-fluid">
		<div class="carousel-caption">
			<h3>Título</h3>
			<p>La leyenda de la imagen</p>
		</div>
	</div>
	<div class="carousel-item">
		<img src="img/p2.jpg" class="img-fluid">
			<div class="carousel-caption">
				<h3>Título</h3>
				<p>La leyenda de la imagen</p>
			</div>
		</div>
	<div class="carousel-item">
		<img src="img/p3.jpg" class="img-fluid">
		<div class="carousel-caption">
			<h3>Título</h3>
			<p>La leyenda de la imagen</p>
		</div>
	</div>
</div>

Los controles

Estos son elementos que aparecen a izquierda y derecha para ir al siguiente o al anterior slide, para ello y ya fuera del div de lasimágenes vamos a poner los siguientes enlaces:

<a href="#mi_carousel" class="carousel-control-prev" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a>
<a href="#mi_carousel" class="carousel-control-next" data-slide="next"> <span class="carousel-control-next-icon"></span> </a>

En ellos le indicamos a que carrusel debe de apuntar, se le introduce la clase que define si es al anterior o al siguiente slide y se apunta a dicho elemento.

El span puede ser modificado por cualquier elemento que queramos, desde imagenes, elementos de google fonts, caracteres especiales….

Uniendo las piezas

Ya tenemos todas las piezas para crear nuestro slider con bootstrap 4 ahora ya solo nos falta unirlas para obtener nuestro slider, cuyo código quedaría así:

<div id="mi_carousel" class="carousel slide" data-ride="carousel">
	<!--indicadores-->
	<ul class="carousel-indicators">
		<li data-target="#mi_carousel" data-slide-to="0" class="active"></li>
		<li data-target="#mi_carousel" data-slide-to="1"></li>
		<li data-target="#mi_carousel" data-slide-to="2"></li>
	</ul>
	
	<!--imagenes-->
	
	<div class="carousel-inner ">
		<div class="carousel-item active">
			<img src="img/p1.jpg" class="img-fluid">
			<div class="carousel-caption">
				<h3>Título</h3>
				<p>La leyenda de la imagen</p>
			</div>
		</div>
		<div class="carousel-item">
			<img src="img/p2.jpg" class="img-fluid">
				<div class="carousel-caption">
					<h3>Título</h3>
					<p>La leyenda de la imagen</p>
				</div>
			</div>
		<div class="carousel-item">
			<img src="img/p3.jpg" class="img-fluid">
			<div class="carousel-caption">
				<h3>Título</h3>
				<p>La leyenda de la imagen</p>
			</div>
		</div>
	</div>

	<!--controles-->
	<a href="#mi_carousel" class="carousel-control-prev" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a>
	<a href="#mi_carousel" class="carousel-control-next" data-slide="next"> <span class="carousel-control-next-icon"></span> </a>
</div>

De esta forma obtenemos nuestro carousel en bootstrap 4 para introducir en nuestros proyectos, aunque ya sabéis lo que opino del abuso de slides en un carrusel o de introducción de este elemento de forma innecesaria en una web.