Slider responsive solo con css / Pure CSS Slider Responsive

  • By null
  • Last update: May 11, 2022
  • Comments: 1

Sheet Slider

Best slider for images with pure CSS Demostración

license changelog

Instalación

Aloja el archivo sheetslider.min.css e incluir arriba de </head>:

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

Tambien puedes cargar los estilos desde la cdn:

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/zkreations/[email protected]/dist/sheetslider.min.css"/>

Modo de uso

Solo hay que seguir el ejemplo del archivo index.html. Esta sería la forma mas simple de iniciar el slider sin textos ni botonera:

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

Para incluir la botonera, duplicar <div class="sh__arrows">...</div> y cambiar sh__arrows por sh__btns

Relacion de aspecto

Clase Description
sh-21r9 Apaisado
sh-16r9 Rectangular
sh-4r3 Estándar
sh-1r1 Cuadrado perfecto

La clase se establece en la etiqueta principal del slider. Si no se especifica se utiliza "apaisado" por defecto. Ejemplo:

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

Animaciones

Clase Description
sh-default Animacion por defecto (horizontal)
sh-vertical Pase de imagenes en vertical
sh-fade Desvanecimiento suave
sh-flip Plegado vertical

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

<div class="sheetSlider sh-default">

Auto slide

Aloja el archivo sheetslider.min.js e incluyelo en tu proyecto arriba de </body> de la siguiente forma:

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

O desde una cdn:

<script src="//cdn.jsdelivr.net/gh/zkreations/[email protected]/dist/sheetslider.min.js"></script>

Incluye la clase sh-auto para iniciar la animacion, Ejemplo:

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

Opcionalmente puedes agregar un boton "play/pause" agregando la siguiente etiqueta:

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

Licencia

Sheet Slider is licensed under the MIT License.

Github

https://github.com/zkreations/SheetSlider

Comments(1)

  • 1

    v2.0.0

    • Nueva estructura HTML basada en bloques y se eliminan las listas
    • Codigo CSS utilizando BEM en su mayoría
    • Ya no es obligatorio conservar las id "s1, "s2", "s3" ... etc.
    • Ahora puedes duplicar y tener mas de un slider en la pagina
    • Nueva animacion "fade"
    • Nueva animacion "vertical"
    • Se eliminan temas y colores
    • Se agrega la personalizacion rapida
    • Nuevo documento en vanilla js para automatizar el slider (beta)
    • Correccion de fallo grafico en safari y firefox (animacion cortante)
    • Se elimina el desplasamiento por "left" y se reemplaza por "transform3d"