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

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, entonces utiliza el siguiente enlace alojado en una cdn mediante rawgit:


<link rel="stylesheet" href="https://cdn.rawgit.com/zkreations/SheetSlider/master/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 seria 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

Desde la version 2.0.0 el slider cuenta con animaciones extra. Por defecto es obligatorio especificar la animación por default usando 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.


Auto slide

La transición automática requiere de vanilla javascript, 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> usando una etiqueta script:


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

Si no puedes alojar archivos, utiliza este código perteneciente a una cdn con rawgit:


<script src="https://cdn.rawgit.com/zkreations/SheetSlider/master/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">

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.