Blog
En este sencillo tutorial aprenderemos a crear nuestro propio slider en Bootstrap. Una de las ventajas de utilizar Bootstrap es que nos permite hacer una página totalmente responsive para que se pueda ajustar correctamente en dispositivos móviles y tablets.
¿Cómo crear un slider en Bootstrap?
Un slider o carousel en Bootstrap se puede crear de varias formas, una de ellas es solamente mediante código HTML como se muestra en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Slider en Bootstrap</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">
<!-- 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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slide1.png" alt="First Slide">
<div class="carousel-caption">
<h3>Título de la primera diapositiva</h3>
<p>Contenido de la diapositiva</p>
</div>
</div>
<div class="item">
<img src="images/slide2.png" alt="Second Slide">
<div class="carousel-caption">
<h3>Título de la segunda diapositiva</h3>
<p>Contenido de la diapositiva</p>
</div>
</div>
<div class="item">
<img src="images/slide3.png" alt="Third Slide">
<div class="carousel-caption">
<h3>Título de la tercera diapositiva</h3>
<p>Contenido de la diapositiva</p>
</div>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</body>
</html>
Antes de probar el ejemplo anterior es importante remplazar la imágenes por las nuestras. El resultado de visitar la página anterior seria el siguiente.
Explicación de atributos:
data-ride=”carousel”: Con este atributo se indica que el carousel debe comenzar la animación automáticamente después de cargar la página.
data-interval=”3000″: Se indica el tiempo que tarda entre cada transición. Esto solamente funciona si se indica la propiedad data-ride. En este caso la transición es de 3 segundos.
Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo crear un slider en Bootstrap. Espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.
Buenas noches Programacionextrema.com, una pregunta como hago para que el slider no sea tan grande o yo poder poner dimenciones, algo como 70% o algo así, por favor.
Hola Zawer, gracias por comentar. Una forma muy sencillas es agregando un poco de CSS, básicamente el atributo width: 70%. Entonces si lo haces directamente en el HTML el div del slider te va a quedar así:
Espero haberte ayudado, cualquier otra consulta no dude en comentarla. Saludos.
Buen día Programacionextrema.com, una pregunta como hago para que el carrusel deje de ser responsive y quede fijo aun cuando se vea en diferentes dispositivos?
Hola Leo, una alternativa puede ser estableciendo un ancho fijo en css del tamaño que quieras, por ejemplo de 1024 píxeles:
#myCarousel { width: 1024px !important; }Probalo y avisame cualquier cosa. saludos.
Hola, como puedo hacer para que en el slider, se vea el 100% del primer item, y un poco del segundo, osea el item que viene? es posible? Desde ya muchas gracias
Estimado ¿cómo podría hacer para quitar las sombras laterales del carrousel?
Buenas, el código del slider me funciona perfectamente, la cuestión es que yo necesito un slider de 15 imgs… ¿cómo hago para activar los slides de las otras 12? Gracias
Hola Enrique, es bastante simple, tenes que agregar un tag más por imagen:
<div class="item"> <img src="images/slide3.png" alt="Third Slide"> <div class="carousel-caption"> <h3>Título de la tercera diapositiva</h3> <p>Contenido de la diapositiva</p> </div> </div>Dentro del tag con clase carousel-inner. Cualquier otra duda avisame.
Hola que tal, una pregunta las sombras ya vienen por defecto, es decir se pueden quitar? Saludos
tengo una duda como puedo hacer un slider con botones seleccionables, alguien me puede ayudar por lo que investigue solo me aparecen los que estan alli arriba pero no es lo que busco y no se como hacerle saludos o si alguien me puede recomendar algun link o algo donde masomenos venga lo que busco y ya pues programos lo que falta saludos