Existen muchísimos plugins para crear slides en jQuery totalmente gratuitos para rotar elementos como si fuera un bucle. Pero si la aplicación web utiliza el framework Bootstrap, no necesitaremos un plugin jQuery adicional para crear un slide de elementos como un carrusel. Bootstrap JS Carousel (carousel.js) te proporciona una forma sencilla de implementar un carrusel en una página web.
En este tutorial, te mostraremos cómo crear un carrusel de imágenes con Bootstrap. También, utilizando este código de ejemplo, podrás ampliar la funcionalidad de carrusel de Bootstrap y crear diferentes tipos de sliders.
Antes de empezar a crear nuestro carrusel, vamos a incluir la librería Bootstrap y la de jQuery.
<!-- Compiled and minified Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <!-- Minified JS library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Compiled and minified Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
Carrusel con Bootstrap
El siguiente ejemplo crea un carrusel muy básico.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/image-1.jpg" alt="">
</div>
<div class="item">
<img src="images/image-2.jpeg" alt="">
</div>
<div class="item">
<img src="images/image-3.jpeg" alt="">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Carrusel con Bootstrap con títulos
El siguiente ejemplo crea un carrusel muy básico y añade títulos a cada una de las imágenes.
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/image-1.jpg" alt="">
<div class="carousel-caption">
<h3>First Slide</h3>
<p>This is the first image slide</p>
</div>
</div>
<div class="item">
<img src="images/image-2.jpeg" alt="">
<div class="carousel-caption">
<h3>Second Slide</h3>
<p>This is the second image slide</p>
</div>
</div>
<div class="item">
<img src="images/image-3.jpeg" alt="">
<div class="carousel-caption">
<h3>Third Slide</h3>
<p>This is the third image slide</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
Carrusel con Bootstrap con controles personalizados
El siguiente ejemplo llama a un carrusel manual el cual cuenta con unos controles personalizados para gestionar el paso de imágenes.
<div id="myCarouselCustom" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarouselCustom" data-slide-to="0" class="active"></li>
<li data-target="#myCarouselCustom" data-slide-to="1"></li>
<li data-target="#myCarouselCustom" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/image-1.jpg" alt="">
<div class="carousel-caption">
<h3>First Slide</h3>
<p>This is the first image slide</p>
</div>
</div>
<div class="item">
<img src="images/image-2.jpeg" alt="">
<div class="carousel-caption">
<h3>Second Slide</h3>
<p>This is the second image slide</p>
</div>
</div>
<div class="item">
<img src="images/image-3.jpeg" alt="">
<div class="carousel-caption">
<h3>Third Slide</h3>
<p>This is the third image slide</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Custom Controls -->
<a href="javascript:void(0);" id="prevBtn">Prev Slide</a>
<a href="javascript:void(0);" id="nextBtn">Next Slide</a>
Código Javascript
<script type="text/javascript">
// Call carousel manually
$('#myCarouselCustom').carousel();
// Go to the previous item
$("#prevBtn").click(function(){
$("#myCarouselCustom").carousel("prev");
});
// Go to the previous item
$("#nextBtn").click(function(){
$("#myCarouselCustom").carousel("next");
});
</script>
Opciones del carrusel
Puedes configurar las siguientes opciones en carrusel de Bootstrap según tus necesidades.
- interval (número) Define la cantidad de tiempo entre cada uno de los elementos del slide. Puedes ponerlo a false para que el slider no se reproduzca automáticamente. El tiempo por defecto es de 5000 milisegundos.
- pause (cadena|null) Pausa el ciclo cuando el ratón se pose encima, y lo reanuda cuando el ratón abandona el slide. Puedes definir este valor a false para impedir este comportamiento. El valor por defecto de esta opción es hover.
- wrap (booleano) Especifica si el carrusel debe ciclar continuamente o deternerse en el último elemento. El valor por defecto es true.
- keyboard (booleano) Especifica si el carrusel debe reaccionar a los eventos del teclado. El valor por defecto es true.
Cómo utilizar estas opciones
El siguiente ejemplo muestra cómo definir las opciones del carrusel.
<script type="text/javascript">
$('.carousel').carousel({
interval: 8000,
pause:true,
wrap:false
});
</script>
Fuente: codexworld.com