toggle

Sheet Slider, pase de imágenes a base de CSS Puro

min Sheet Slider
Demostración Descargar Repositorio

—Versión actual 1.03

Sheet Slider es un Slider desarrollado únicamente con css. Está optimizado para móviles gracias a su diseño responsive que se adapta según la resolución o dispositivo del usuario. Es fácil de implementar, con 2 sencillos pasos ya lo tienes funcionando en tu web, además es fácil de modificar, puedes elegir entre los colores disponible e incluso agregar un tema o crear uno propio.


Características

  • Desarrollado usando solo css
  • Optimizado para móviles
  • Soporte para temas y colores
  • Compatible con Google Chrome, Opera, Firefox, IE 11+, Edge, Safari.
  • Fácil de implementar

Instalación

Descargar el archivo adjunto en esta entrada e incluir sheet-slider.min.css arriba de </head> de la siguiente forma:


<link rel="stylesheet" href="sheet-slider.min.css"/>

Si no puedes alojar el archivo o prefieres incrustarlo directamente, solo copia el contenido de sheet-slider.min.css y pegalo junto con el resto del css de tu página.


En el html agrega el cuerpo del slider, puedes tomar de ejemplo la estructura del archivo index.html incluido en el zip. La forma más simple de hacerlo sin textos ni botonera sería la siguiente:


<div class="sheet-slider">
   <input id="s1" type="radio" class="sheet" name="slide1" checked/>
   <input id="s2" type="radio" class="sheet" name="slide1"/>
   <input id="s3" type="radio" class="sheet" name="slide1"/>
   <ul>
      <li class="tab"><img src="img/slide-img01.jpg" /></li>
      <li class="tab"><img src="img/slide-img02.jpg"/></li>
      <li class="tab"><img src="img/slide-img03.jpg"/></li>
   </ul>
   <!--flechas-->
   <div class="sh-arrows">
      <label for="s1"></label>
      <label for="s2"></label>
      <label for="s3"></label>
   </div>
</div>

Algunas limitaciones

  • Solo puede haber un slider por página, ya que se basa en la id del input y esta no puede repetirse.
  • El slider solo puede contener hasta un máximo de 8 imágenes, que puede ser expandido una vez comprendido el código.

Para mas información acerca del código, revisa el repositorio en github.