Crear un slider en Html5 y Css3 es mucho más fácil de lo que pensamos, y para ello os enseñaré como hacerlo en menos de 3 minutos y sin la utilización de Javascript.

¿Porqué crear un Slider en Html5 y Css3?

Un slider no es más que un pase de imágenes,  al que le podemos incluir un texto con la descripción de las mismas, y que se incluyen en las páginas web para potenciar uno o varios productos o servicios.

Existen muchas librerías Javascript para realizarlo, pero en esta ocasión nosotros utilizaremos únicamente Html5 y Css3.




 

Utilización de Sheet Slider

Sheet Slider es un slider automático solo con html5 y css3 puro, por tanto no requiere de Javascript para funcionar. Además gracias a su diseño responsive está optimizado para dipositivos móviles.

Instalación de nuestro Slider

Primeramente deberemos de descargar el archivos  sheetslider.min.css desde su página web, y posteriormente incluirlo en nuestro proyecto dentro del head mediante una etiqueta link.

También tenemos la opción de cargarlo directamente desde su web sin necesidad de descargarlo.

A continuación vamos a editar el archivo html5 de nuestro slider con una estructura básica, tal y como os muestro a continuación:

Si por el contrario, queremos agregar una estructura completa a nuestro slider, en la que incluimos textos, botones o flechas, el código que tendríamos que poner es el siguiente:

Agregando imágenes a nuestro Slider

SheetSlider soporta un máximo de 10 imágenes, más que suficiente para nuestros proyectos.

En este ejemplo tenemos tres imágenes en nuestro Slider. Si queremos agregar una cuarta imagen, agregamos otro input con la id s4, y así hasta el máximo de 10.

 

Cómo crear un efecto LightBox sólo con CSS3

 

Para los botones y flechas haremos exactamente lo mismo, solo que debemos de cambiar el valor del  atributo for .

Para finalizar agregamos un título y texto secundario a nuestro Slider, tal y como os muestro a continuación.

Es importante destacar que cada vez que agregamos un nuevo elemento a nuestro slider tenemos que repetir el mismo esquema con los nuevos valores.




 

Configurando las animaciones de nuestro Slider

Es necesario especificar las animaciones por defecto utilizando la clase sh--default. Si por el contrario queremos cambiar el efecto de transición utilizaremos “vertical” o “fade”.

Creando un autoslide

Si queremos que nuestras imágenes pasen automáticamente deberemos incluir vanilla javascript a nuestro código.

Para iniciar la animación automáticamente solo debemos especificar la clase “sh–auto” en la etiqueta contenedora de nuestro slider:

 

Ver Demostración

 

 

Calificación de Lectores
[Total: 1 Media: 5]

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Usamos cookies para personalizar su experiencia. Si sigue navegando estará aceptando su uso. Más Información | Cerrar