Sheet Slider, pase de imágenes con html y css puro

Slider CSS sin Javascript y automático Slider automático solo con HTML y CSS

Demostración Repositorio Star

—Versión actual v2.1.0

Sheet Slider es un slider automático solo con html y css puro que desarrollé para zkreations. No requiere javascript para funcionar. Esta optimizado para móviles gracias a su diseño responsive. Desde la versión 2 ahora cuenta con 3 animaciones de transición, nueva estructura y desplazamiento automático.


Instalación

Descarga y aloja el archivo sheetslider.min.css en el servidor donde se aloja tu proyecto, e incluirlo arriba de </head> mediante una etiqueta link:


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

Si no cuentas con un servidor para alojar archivos, utiliza el siguiente enlace que priviene de una cdn mediante rawgit:


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

Ahora para la estructura html, puedes seguir el ejemplo del archivo index.html. Algunos elementos como botones y texto son opcionales, esta sería la estructura más básica para ejecutar el slider:


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

Por el contrario, si deseas agregar el slider con la estructura completa, la cual incluye textos, botonera y flechas, el código necesario 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 -->

Agregar mas imagenes

El slider soporta hasta un máximo de 10 imágenes, cada vez que se agregue una nueva imagen al slider debemos repetir 3 partes del código. En el siguiente ejemplo estoy tomando la estructura completa, la cual tiene solo 3 imagenes, pues bueno, para agregar una cuarta imagen primero repetimos los inputs:


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

Al agregar una cuarta imagen, el último input se debe repetir, haciendo un cambio en el atributo id="", ya que siguen un orden numérico (s1, s2, s3) y al agregar un cuarto elemento entonces le ponemos s4:


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

Para la botonera y flechas hacemos exactamente lo mismo, sol que el atributo a cambiar es for="", pero el valor sigue siendo el mismo, esto se debe a que estas etiquetas controlan los input y deben identificarlos:


<!--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 -->

Por último simplemente agregamos un nuevo elemento dentro del slider, el codigo en cuestion es el siguiente:


<!-- 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>

Cada vez que agreguemos un nuevo elemento al slider tenemos que repetir el mismo patrón.


Animaciones

Por defecto se especifica la clase sh-default. Cambia "default" por "vertical" o "fade" para cambiar el efecto de transición:


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

Tengo planes de agregar más animaciones en versiones posteriores. Si tienes alguna sugerencia de animaciones que debería desarrollar para sheet slider no dudes en dejarla en los comentarios.


Relación de aspecto

Ahora el slider se basa en Intrinsic Ratio, pque por defecto se establece en 23:9 (Apaisado) si no se especifica ninguna. La siguiente tabla contiene las relaciones de aspecto disponibles:


sh-21r9 Apaisado
sh-16r9 Rectangular
sh-4r3 Desvanecimiento suave
sh-1r1 Cuadrado perfecto

La clase se establece en la etiqueta principal del slider. Ejemplo:


<div class="sheetSlider sh-16r9">

Auto slide

La transición automática requiere de javascript, pero de todos modos, el código es muy pequeño y sin dependencia. Si deseas activarlo aloja el archivo sheetslider.min.js en tu servidor e incluyelo arriba de </body> de esta manera:


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

Si no puedes alojar archivos, puedes usar el enlace proveniente de rawgit:


<script src="//cdn.rawgit.com/zkreations/SheetSlider/c47d8ad3/dist/sheetslider.min.js"></script>

Ahora para iniciar la animación automática solo debes especificar la clase sh-auto en la etiqueta contenedora del slider, por ejemplo:


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

Opcionalmente puedes agregar un botón para pausar o continuar con la animación, para ello agrega la siguiente etiqueta, antes de cerrar el contenedor principal de Sheet Slider:


<button class="sh-control"></button>

Eso ha sido todo amigos, espero que les haya gustado esta actualización y si fue asi, no olviden compartir este articulo, eso me ayudaria mucho. Cualquier duda o sugerencia dejenla en los comentarios.

Quizás te interese