Crear un Carousel o Slider de Imagenes con Bootstrap 3

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>

[/code]

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>

[/code]

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>

[/code]

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>

[/code]

Codigo Completo

Les agrego el codigo completo en un gist de GitHub:

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.