Saltar al contenido

Cómo crear un slider en html5 y css3 en 3 minutos

2 junio, 2018
Slider en Html5 y CSS3

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 Responsive?

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

Gracias a Sheet Slider vas a poder crear un slider html5 y css3 responsive gratis, optimizado para dispositivos móviles y que no require de ninguna librería Javascript para funcionar.

Instalación de nuestro Slider responsive

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:

Contenido Relacionado