Sheet Slider

Sliding images with pure CSS
imgText

Artwork surreal

Secondary text without link
imgText

2 Weeks

Secondary text with link
imgText

Cat under a carpet

Secondary text without link
imgText

Sheet

Secondary text without link
imgText

Cute girl and cat

Secondary text without link

Instalar

Sube el archivo sheetslider.min.css e incluyelo arriba de </head>

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

O cargalo desde una cdn con jsdelivr:

<link href="//cdn.jsdelivr.net/gh/zkreations/SheetSlider@2.2.0/dist/sheetslider.min.css" rel="stylesheet"/>

Estructura

Algunos elementos de la estructura html son opcionales y no impedirán que el slider funcione. Esta sería la estructura básica sin botonera y sin textos:

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

Animación

Las animaciones las controla la clase sh-default, es obligatoria y establece la animación por defecto. Cambia default por vertical, fade o flip para cambiar el efecto de transición:

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

Auto slide

El slider carece de animación automatica mediante css puro, pero si se desea, aloja el archivo sheetslider.min.js e incluyelo en tu proyecto arriba de </body>

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

O cargalo desde una cdn con jsdelivr:

<link href="//cdn.jsdelivr.net/gh/zkreations/SheetSlider@2.2.0/dist/sheetslider.min.js" rel="stylesheet"/>

Ahora agrega la clase sh__auto al contenedor principal de la siguiente manera:

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