Cargando



Aprendiendo a hacer un slideshow responsive con HTML5 + Bootstrap

En este tutorial partiremos de las nociones básicas de html5 para crear un slideshow atractivo que pueda ser utilizado dentro de nuestro sitio web y que sea adaptable a todo tipo de dispositivos.


ago 25 2015 11:57
Profesional
ago 25 2015 18:09
Para aquellos que aún no conocen la terminología les indico que 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.

¿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”.



Comencemos…



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.


slideshow-responsive.jpg


Pulsa en la imágen para ampliarla


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

slideshow-responsive2.jpg


Pulsa en la imágen para ampliarla



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


slideshow-responsive3.jpg


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…


slideshow-responsive4.jpg


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…


slideshow-responsive6.jpg


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”.


slideshow-responsive8.jpg


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…



Pulsa en la imágen para ampliarla


¿Te ayudó este Tutorial?


18 Comentarios


Juan Carlos
ago 25 2015 12:08

Como para no darte un punto positivo. Genial tutorial, vas a hacer más Ronny???

gracias por tu tutorial.

me ha encantado a mi también el tutorial, gracias Ronny, solo una pregunta: ¿Tienes algun archivo zip para poder coger el ejemplo del codigo? Estaría genial si te apetece. gracias!!


Alejandro Teba
ago 25 2015 17:26

Genial efecto. Estoy analizandolo.

 

Me uno a lo que dicen los demás, si tuvieras un file con el code para probarlo sería genial.

 

gracias


Ronny Bonillo
ago 25 2015 17:54

buen día amigos, gracias por el apoyo, es genial que les halla gustado pues este es uno de mis 3 primeros tutoriales en el sitio y realmente no esperaba respuestas positivas tan rápidamente, con respecto a tu pregunta Juan Carlos, por supuesto que si, estaré acá por un tiempo colocando nuevos tutoriales cada semana espero que les gusten y que me apoyen con sus comentarios y valoraciones... Saludos desde Venezuela...


Ronny Bonillo
ago 25 2015 17:58

De nada Nestor1, gracias a ti por comentar! con respecto a tu pregunta pues te recomiendo que vuelvas pronto, pues en las próximas horas se estará actualizando el contenido de este tutorial agregándole al final un .zip para que puedan descargar el código.

De nada Nestor1, gracias a ti por comentar! con respecto a tu pregunta pues te recomiendo que vuelvas pronto, pues en las próximas horas se estará actualizando el contenido de este tutorial agregándole al final un .zip para que puedan descargar el código.

 

Estaré atento yo también, el efecto es espectacular y queda de fábula. gracias anticipadas.


Ronny Bonillo
ago 25 2015 18:07

De nada Eneko...


Alejandro Teba
ago 25 2015 18:13

buen día amigos, gracias por el apoyo, es genial que les halla gustado pues este es uno de mis 3 primeros tutoriales en el sitio y realmente no esperaba respuestas positivas tan rápidamente, con respecto a tu pregunta Juan Carlos, por supuesto que si, estaré acá por un tiempo colocando nuevos tutoriales cada semana espero que les gusten y que me apoyen con sus comentarios y valoraciones... Saludos desde Venezuela...

 

Qué rápido!!

 

gracias Ronny, no sabes lo bien que me viene que lo hayas compartido el código.

 

Muchas gracias developer!

pd: te sigo.


Ronny Bonillo
ago 25 2015 18:19

de nada alejandro, gracias a ustedes por el apoyo!

De nada Nestor1, gracias a ti por comentar! con respecto a tu pregunta pues te recomiendo que vuelvas pronto, pues en las próximas horas se estará actualizando el contenido de este tutorial agregándole al final un .zip para que puedan descargar el código.

 

Muchas gracias por adjuntar el archivo Ronny. Y bienvenido a Solvetic.


Carlos Sanz
sep 02 2015 17:14

Lo estoy probando, gracias por adjuntarlo Ronny.


Ronny Bonillo
sep 02 2015 22:43

de nada carlos


Fiore Nella
sep 08 2015 17:25

Gracias por el archivo adjunto!! muy chulo.


Ronny Bonillo
sep 08 2015 17:37

De nada Fiore :)


Reneé Toapanta García
jun 02 2016 22:58

Buen dia, esta bien elegante el tema pero no puedo descargarmelo, me pide una y otra vez que me identifique y no me deja pasar de ahi. Si me podrian ayudar les agradezco un millon.


Julio Martinez
jul 26 2017 21:03

No veo el archivo .zip para ver el codigo

muy bueno, pero no veo el .zip para descargar el codego.

 

Slds

Buenas... :)

Super explicación y presentación Ronny :) Igual que los ultimos comentaristas.. Dónde está el link para descargar el código?

 

Gracias y saludos, 

Nelly.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X