0

Aprendiendo a hacer un slideshow responsive con HTML5 + Bootstrap



Aprendiendo a hacer un slideshow responsive con HTML5 + Bootstrap

Aprendiendo a hacer un slideshow responsive con HTML5 + Bootstrap .  un slideshow consiste en una sucesión de varias imágenes que se van presentando una tras otra, veamos cómo se hace utilizando html5, css3, y el framework bootstrap3.

mas tutoriales de informatica y programacion

Temas mas vistos

¿Que necesitamos?

a. Si bien para trabajar con archivos .html no necesitamos propiamente un servidor local instalado, les recomiendo instalar alguno para tener todos nuestros archivos organizados en un directorio y poder trabajar más cómodamente si luego queremos añadir código PHP, en este caso usaré Xampp Server, lo pueden descargar de https://www.apachefr…g/es/index.html

b. Ya que vamos hacer un slide necesitaremos las imágenes que vamos a colocar en él, todas deberán tener exactamente el mismo tamaño en pixeles, usare unas con un tamaño de 1200 X 600.

c. Un editor de código de su preferencia, en este caso usare uno llamado “Brackets”.

1. Ya que hemos instalado Xampp, nos vamos al directorio “C:/xampp/htdocs” y creamos una nueva carpeta, en este caso la llamare “sliderShow_main”, dentro de ella creare otra carpeta y la llamare “images”, ahí colocare las imágenes que usare en el slideshow.

Pulsa en la imágen para ampliarla

2. Ahora abriremos nuestro editor de código, vamos al menú “Archivo > Nuevo”.

Pulsa en la imágen para ampliarla

Y en este nuevo archivo escribiremos el código HTML base.

Pulsa en la imágen para ampliarla

Guardaremos este archivo con la extensión (.html) dentro de la carpeta que hemos creado en el paso 1 “sliderShow_main”.

3. Posteriormente añadiremos un título para el archivo y las referencias a los archivos de Bootstrap y jquery que necesitaremos para que nuestro slider funcione correctamente, tenemos dos opciones podemos descargar estos archivos y tenerlos en carpetas de nuestro sitio dentro del servidor local o podemos añadirlas desde la web, lo que nos ahorraría espacio en nuestro servidor. Yo elegiré la segunda opción, verán cómo hacerlo en la imágen siguiente…

Pulsa en la imágen para ampliarla

4. Posteriormente añadiremos dentro del <body> </body> dos <div> a las que le asignaremos las clases “container” y “col-md-12” respectivamente de la siguiente manera…

Pulsa en la imágen para ampliarla

Estos dos <div> que agregamos servirán para que nuestro slider se muestre sobre todo el espacio disponible en nuestra pantalla.

5. Ya que hemos preparado nuestro código vamos a comenzar a añadir los elementos que conformaran el slide, veamos…

Pulsa en la imágen para ampliarla

Como pueden ver hemos añadido un nuevo <div> al que llamamos “carousel_1” y le asignamos 2 clases de bootstrap llamadas “carousel ” y “slide”, notese que ambas van separadas por un espacio, adicionalmente para que el slide funcione es necesario añadir el atributo (data-ride= “carousel”).

6. Dentro de la capa anterior añadiremos una lista ordenada con la clase “carousel-indicators” la cual nos va a servir para añadir la cantidad de indicadores correspondiente a nuestras imágenes, en este caso usaremos tres imágenes por tanto tendremos tres indicadores comenzando a contar desde el “0”.

Pulsa en la imágen para ampliarla

Noten que a los <li> de nuestra lista le añadimos un atributo “data-target” en el cual señalamos en que capa va a mostrarse nuestro slide, mientras que el atributo “data-slide-to” indica de forma numérica a que ítem de nuestro slide hacemos referencia.

7. Ahora añadiremos los ítem con las imágenes que se mostraran, veamos el código en el encontraran más detalles…

Pulsa en la imágen para ampliarla

Luego que hemos escrito todo lo asociado al primer ítem simplemente copiamos y pegamos según la cantidad de ítem que necesitemos teniendo en cuenta que debemos cambiar la ruta de la imagen y que los demás ítem no deben contener la clase “active”.

Pulsa en la imágen para ampliarla

Como pueden ver ya hemos añadido los 3 ítems con nuestras 3 imágenes y nuestro código es funcional, pero ahora agregaremos elementos de control (Prev & Next) para movernos adelante y atrás entre nuestras imágenes y además le añadiremos unos iconos. Dejando nuestro código final de la siguiente manera…

Pulsa en la imágen para ampliarla

Si seguimos los pasos correctamente, en nuestro navegador podremos ver los siguientes resultados…







comparte con tus amigos

codigo fuente

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *