Carrusel de imagen adaptable con HTML puro/CSS-SheetSlider

Vista prévia

Descripción

SheetSlider es una biblioteca de CSS que se utiliza para generar un deslizador de secuencia de bucle infinito adaptable de una lista de imágenes. Desarrollado con CSS puro sin JavaScript.

Funcionamiento

Descargue e incluya la hoja de estilo de núcleo Sheet-Slider. min. CSS en su archivo HTML.

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

Incluya un esquema de color de su elección en el archivo HTML.

• Amber. CSS
• Blue-Grey. CSS
• Blue. CSS
• cian. CSS
• Deep-Purple. CSS
• Grey. CSS
• Indigo. CSS
• light-Blue. CSS
• Light-Green. CSS
• Pink. CSS
• Purple. CSS

<link rel="stylesheet" href="dist/color/cian. CSS">

Crea un deslizador de carrusel con 5 imágenes.

<div class="sheet-slider">

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

 <input id="s5" type="radio" name="slide1"/>

 <ul>

 <!--images-->



<li class="tab">




 <img src="1.jpg" />




 <div>






<h3>Slide 1</h3>




 </div>



</li>







<li class="tab">




 <img src="2.jpg"/>




 <div>






<h3>Slide 2</h3>




 </div>



</li>







<li class="tab">




 <img src="3.jpg"/>




 <div>






<h3>Slide 3</h3>




 </div>



</li>







<li class="tab">




 <img src="4.jpg"/>




 <div>






<h3>Slide 4</h3>




 </div>



</li>



<li class="tab">




 <img src="5.jpg"/>




 <div>






<h3>Slide 5</h3>




 </div>



</li>


</ul>




<!--pagination buttons-->

 <div class="sh-btns">



<label for="s1"></label>



<label for="s2"></label>



<label for="s3"></label>



<label for="s4"></label>



<label for="s5"></label>

 </div>




<!--navigation arrows-->

 <div class="sh-arrows">



<label for="s1"></label>



<label for="s2"></label>



<label for="s3"></label>



<label for="s4"></label>



<label for="s5"></label>

 </div>
</div>

Cambie el tema predeterminado a oscuro. Solo tiene que incluir el Darken. CSS después de haber cargado la hoja de estilos de núcleo.

<link rel="stylesheet" href="dist/theme/darken.css">