Un carousel o slider de imagenes es una forma muy util para presentar al usuario un conjunto de imagenes de manera secuencial con unos controles para seleccionar imagen anterio o siguiente.
Existen muchos plugins o librerias que nos pueden servir para crear carouseles o sliders, pero tambien bootstrap nos presenta una opcion para crear estos controles.
Lo que necesitamos es:
- Bootstrap 3
- JQuery
En nuestra pagina HTML de ejemplo agregamos las referencias correctas para bootstrap.min.css, jquery.min.css y bootstrap.min.js, al final les dejare el codigo completo y un paquete con contendra las librerias, el codigo y las imagenes de ejemplo.
Empecemos
Introducimos el siguiente codigo que sera el contenedor, el row y un col-md-12 para colocar el carousel.
[code language=”html”]<div class="container">
<div class="row">
<div class="col-md-12">
<!– aqui insertaremos el carousel –>
</div>
</div>
</div>
Para definir el carousel usaremos el siguiente codigo que introduciremos en el espacio que se indica del codigo anterior:
[code language=”html”]<div id="carousel1" class="carousel slide" data-ride="carousel">
</div>
[/code]Esta parte a su vez es un contenedor, que contendra los elementos necesarios para el carousel.
Indicadores
Los indicadores son una especie de “puntos” que nos muestran el total de imagenes o elementos que hay en el slider, tambien sirven para navegar entre los diferentes elementos al darle click a los “puntos”.
[code language=”html”]<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
Como pueden ver los indicadores se crean con una lista ordenada, donde el parametro data-target debe coincidir con el parametro “id”, osea en este caso “#container1″, y el parametro data-slide hace referencia al indice de la imagen, empezando desde 0, en este caso hay 3 imagenes, los indices son 0, 1 y 2, si hubieran 5 imagenes, los indices serian 0, 1, 2, 3 y 4, y asi sucesivamente.
Tambien es necesario agregar el paramentro class=”active” en el primer indicador o en cualquier otro, pero siempre se debe incluir el parametro class=”active” en el carousel.
Imagenes
Las imagenes se agregan en un contenedor con clase “carousel-inner” donde cada imagen se agrega en otro contenedor con clase “item”, y podemos decir que “carousel-inner” puede contener tantos elementos de clase “item” como sean necesarios.
En el siguiente ejemplo incluyo 1 imagen, pero en el codigo completo al final del articulo les incluyo 3 imagenes:
[code language=”html”]<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/image1.jpg" alt="Imagen 1">
<div class="carousel-caption"> Mi imagen 1 </div>
</div>
</div>
Cada elemento de clase “item” contiene dentro una imagen y un elemento con clase “carousel-caption” que equivale a un subtitulo para la imagen.
Controles
Y por ultimo pero no menos importantes, los controles para seleccionar imagen anterior y siguiente:
[code language=”html”]<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Siguiente</span>
</a>
Codigo Completo
Les agrego el codigo completo en un gist de GitHub:
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 http://evilnapsis.com/ –> | |
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Carouseles</title> | |
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-12"> | |
<!– aqui insertaremos el slider –> | |
<div id="carousel1" class="carousel slide" data-ride="carousel"> | |
<!– Indicatodores –> | |
<ol class="carousel-indicators"> | |
<li data-target="#carousel1" data-slide-to="0" class="active"></li> | |
<li data-target="#carousel1" data-slide-to="1"></li> | |
<li data-target="#carousel1" data-slide-to="2"></li> | |
</ol> | |
<!– Contenedor de las imagenes –> | |
<div class="carousel-inner" role="listbox"> | |
<div class="item active"> | |
<img src="images/image1.jpg" alt="Imagen 1"> | |
<div class="carousel-caption"> Mi imagen 1 </div> | |
</div> | |
<div class="item"> | |
<img src="images/image2.jpg" alt="Imagen 2"> | |
<div class="carousel-caption"> Mi imagen 2 </div> | |
</div> | |
<div class="item"> | |
<img src="images/image3.jpg" alt="Imagen 3"> | |
<div class="carousel-caption"> Mi imagen 3 </div> | |
</div> | |
</div> | |
<!– Controls –> | |
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"> | |
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> | |
<span class="sr-only">Anterior</span> | |
</a> | |
<a class="right carousel-control" href="#carousel1" role="button" data-slide="next"> | |
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> | |
<span class="sr-only">Siguiente</span> | |
</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script src="jquery.min.js"></script> | |
<script src="bootstrap/js/bootstrap.min.js"></script> | |
</body> | |
</html> |
Descarga
A continuacion les dejo el paquete completo:
[sociallocker]Descargar desde Google Drive: https://drive.google.com/open?id=0B4VwLG0Dpi3tRGRBR2FaWnlfOGs
[/sociallocker]Necesitas mas
Si necesitas mas informacion por favor solicitamela en los comentarios, en mi pagina de facebook, twitter y si quieres estar al dia de las noticias de mi pagina web te invito a suscribirte al blog en el formulario de la derecha.
Derivas poner uno con base de datos Mysql, así básico, saludos
Muy bien isaac, gracias, lo tendre en cuenta para un futuro ejemplo.
Saludos