Bootstrap 4 ofrece algunos cambios en el diseño y la forma de crear un carousel o slider de imágenes, a continuación un ejemplo con explicación.
Base
La base donde crearemos el carousel sera en una fila y columna a lo ancho de toda la pagina.
[code language=”html”]<div class="row">
<div class="col-md-12">
<!– Carousel aqui –>
</div>
</div>
Y el carousel lo creamos o iniciamos con esto:
[code language=”html”]<div id="carouselExample" class="carousel slide" data-ride="carousel">
</div>
[/code]Siempre debemos tener en cuenta el ID que le agreguemos al iniciar el carousel.
Indicadores
Para mostrar los indicadores usamos una lista ordenada OL.
[code language=”html”]<ol class="carousel-indicators">
<li data-target="#carouselExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselExample" data-slide-to="1"></li>
<li data-target="#carouselExample" data-slide-to="2"></li>
</ol>
El data-target debe coincidir con el ID del carousel, esto es asi, para que en caso de que hayan mas de un carousel en la pagina.
El parametro data-slide-to siempre empieza en 0 y aumenta en 1 por cada slide que tengamos. Por ejemplo si tenemos 5 slides, los valores seran del 0 al 4.
Slides
Todos los slides que queramos agregar deben ir dentro de “carousel-inner”.
[code language=”html”]<div class="carousel-inner">
</div>
[/code]Y dentro de esa sola etiqueta deben ir los slides, con el siguiente formato.
[code language=”html”]<div class="carousel-item active">
<img class="d-block w-100" src="screen-11.png" alt="Screenshot 11">
<div class="carousel-caption d-none d-md-block">
<h3>Titulo</h3>
<p>Descripcion</p>
<a href="" class="btn btn-primary">Mas informacion</a>
</div>
</div>
Recuerden que la clase “active” solo la debe tener un slide, este código lo podemos repetir las veces que necesitemos, podemos cambiar la imagen, el titulo, descripcion, y el boton, incluso se puede quitar elementos, todo segun sea necesario.
Controles de Anterior y Siguiente
Adicionalmente contamos con controles de anterior y siguiente para que sea posible navegar de una mejor forma el carousel.
[code language=”html”]<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
Resultado
Asi mas o menos se debe ver el resultado.
Descarga
Te dejo un link de descarga con todo el codigo, bootstrap,jquery e imagenes.
[sociallocker]Link: http://quamiller.com/11227357/bs4-carousel
[/sociallocker]Codigo completo
A continuacion el codigo completo en un gist.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!– Powered By Evilnapsis –> | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>.: Bootstrap 4 :.</title> | |
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> | |
</head> | |
<body> | |
<br><br><br> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-12"> | |
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> | |
<ol class="carousel-indicators"> | |
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> | |
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li> | |
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li> | |
</ol> | |
<div class="carousel-inner"> | |
<div class="carousel-item active"> | |
<img class="d-block w-100" src="screen-11.png" alt="Screenshot 11"> | |
<div class="carousel-caption d-none d-md-block"> | |
<h3>Titulo</h3> | |
<p>Descripcion</p> | |
<a href="" class="btn btn-primary">Mas informacion</a> | |
</div> | |
</div> | |
<div class="carousel-item"> | |
<img class="d-block w-100" src="screen-10.png" alt="Screenshot 10"> | |
</div> | |
<div class="carousel-item"> | |
<img class="d-block w-100" src="screen-13.png" alt="Screenshot 13"> | |
</div> | |
</div> | |
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> | |
<span class="carousel-control-prev-icon" aria-hidden="true"></span> | |
<span class="sr-only">Previous</span> | |
</a> | |
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> | |
<span class="carousel-control-next-icon" aria-hidden="true"></span> | |
<span class="sr-only">Next</span> | |
</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script type="text/javascript" src="jquery.min.js"></script> | |
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script> | |
</body> | |
</html> |
Esto seria todo, espero les sirva, no se olviden de suscribirse al blog y a mi canal de youtube.