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

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.

<link rel="stylesheet" href="dist/sheetslider.min.css"/>

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

<link rel="stylesheet" href="https://cdn.rawgit.com/zkreations/SheetSlider/master/dist/sheetslider.min.css"/>

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:

<div class="sheetSlider sh--default">
   <input id="s1" type="radio" name="slide1" checked/> 
   <input id="s2" type="radio" name="slide1"/>
   <div class="sh__content">
      <div class="sh__item"><img src="img/img01.jpg"/></div>
      <div class="sh__item"><img src="img/img02.jpg"/></div>
   </div>
   <div class="sh__arrows">
      <label for="s1"></label>
      <label for="s2"></label>
   </div>
</div>

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:

<!--Sheet Slider-->
<div class="sheetSlider sh--default">
   <input id="s1" type="radio" name="slide1" checked/> 
   <input id="s2" type="radio" name="slide1"/> 
   <input id="s3" type="radio" name="slide1"/>
   <div class="sh__content">

      <!-- Slider Item -->
      <div class="sh__item">
         <img src="img/slide-img01.jpg" alt="imgText"/>
         <!-- Item Info -->
         <div class="sh__meta">
            <h4>2 Weeks</h4>
            <span>Secondary text <a href="#urlPage">with link</a></span>
         </div>
      </div>

      <!-- Slider Item -->
      <div class="sh__item">
         <img src="img/slide-img02.jpg" alt="imgText"/>
         <!-- Item Info -->
         <div class="sh__meta">
            <h4>Artwork surreal</h4>
            <span>Secondary text without link</span>
         </div>
      </div>

      <!-- Slider Item -->
      <div class="sh__item">
         <img src="img/slide-img03.jpg" alt="imgText"/>
         <!-- Item Info -->
         <div class="sh__meta">
            <h4>Cat under a carpet</h4>
            <span>Secondary text without link</span>
         </div>
      </div>

   </div><!-- .sh__content -->

   <!--botones-->
   <div class="sh__btns">
      <label for="s1"></label>
      <label for="s2"></label>
      <label for="s3"></label>
   </div><!-- .sh__btns -->

   <!--flechas-->
   <div class="sh__arrows">
      <label for="s1"></label>
      <label for="s2"></label>
      <label for="s3"></label>
   </div><!-- .sh__arrows -->
   
</div><!-- .sheetSlider -->

Agregando imágenes a nuestro Slider

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

<input id="s1" type="radio" name="slide1" checked/> 
<input id="s2" type="radio" name="slide1"/> 
<input id="s3" type="radio" name="slide1"/>

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 .

<!--botones-->
<div class="sh__btns">
   <label for="s1"></label>
   <label for="s2"></label>
   <label for="s3"></label>
   <label for="s4"></label>
</div><!-- .sh__btns -->

<!--flechas-->
<div class="sh__arrows">
   <label for="s1"></label>
   <label for="s2"></label>
   <label for="s3"></label>
   <label for="s4"></label>
</div><!-- .sh__arrows -->

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

<!-- Elementos del Slider -->
<div class="sh__item">
   <img src="img/slide-img01.jpg" alt="Texto de la imagen"
   <!-- Información del Elemento -->
   <div class="sh__meta">
      <h4>Texto Primario</h4>
      <span>Texto secundario sin Enlace</span>
   </div>
</div>

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

<div class="sheetSlider sh--vertical">
<div class="sheetSlider sh--fade">

Creando un autoslide

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

<script src="dist/sheetslider.min.js"></script>

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

<div class="sheetSlider sh--default sh--auto">