toggle

Cream Slider, Acordeón responsive usando css

min Cream Slider
Demostración Descargar Repositorio

—Versión actual 1.01

Cream Slider está basado en Sheet Slider y de igual forma, se desarrolló usando solo css. Está optimizado para móviles gracias a su diseño adaptable según la resolución o dispositivo. A diferencia de Sheet Slider, Cream Slider organiza las imagenes simulando un acordeon, Es compatible con todos los navegadores que soporten flex layout.


Características

  • Desarrollado usando solo css
  • Optimizado para móviles
  • Diseño tipo acordeón
  • Compatible con Google Chrome, Opera, Firefox, IE 11+, Edge, Safari.
  • Fácil de implementar

Instalación

Descargar el zip que se encuentra adjunto en esta entrada e incluir cream-slider.min.css arriba de </head> de la siguiente forma:


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

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


Ahora solo resta agregar la estructura html, puedes tomar como ejemplo la estructura del archivo index.html incluido en la descarga del zip.La forma mas simple de usar el slider (sin textos) seria la siguiente:


<div class="cream-slider">
   <input id="c1" type="radio" name="cream1"/>
   <input id="c2" type="radio" name="cream1"/>
   <input id="c3" type="radio" name="cream1"/>
   <ul>
      <li class="tab"><img src="img01.jpg"/><label for="c1"></label></li>
      <li class="tab"><img src="img02.jpg"/><label for="c2"></label></li>
      <li class="tab"><img src="img03.jpg"/><label for="c3"></label></li>
   </ul>
</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.