Control deslizante de imagen CSS3 puro con 5 animaciones de transición

Vista prévia

Descripción

Un componente de Slider de imagen CSS/CSS3 puro que viene con 5 efectos de transición para sus necesidades de diseño especiales.

Funcionamiento

Inserte la hoja de estilos predeterminada en el proyecto.

• Slider-def. CSS: default
• Slider-LTR. CSS: de izquierda a derecha
• Slider-ttb. CSS: de arriba a abajo
• Slider-BTT. CSS: de abajo a arriba
• Slider-simp. CSS: no hay balas de paginación

<link rel="stylesheet" href="style/slider-def.css">

La estructura de marcado necesaria para el control deslizante de imagen.

<div id="slider">

<div class="slides">


<div class="slider">



<div class="legend"></div>



<div class="content">




<div class="content-txt">





<h1>Slide 1</h1>





<h2>This is slide 1</h2>




</div>



</div>



<div class="image">




<img src="img/1.jpg">



</div>


</div>


<div class="slider">



<div class="legend"></div>



<div class="content">




<div class="content-txt">





<h1>Slide 2</h1>





<h2>This is slide 2</h2>




</div>



</div>



<div class="image">




<img src="img/2.jpg">



</div>


</div>


<div class="slider">



<div class="legend"></div>



<div class="content">




<div class="content-txt">





<h1>Slide 3</h1>





<h2>This is slide 3</h2>




</div>



</div>



<div class="image">




<img src="img/3.jpg">



</div>


</div>


<div class="slider">



<div class="legend"></div>



<div class="content">




<div class="content-txt">





<h1>Slide 4</h1>





<h2>This is slide 4</h2>




</div>



</div>



<div class="image">




<img src="img/4.jpg">



</div>


</div>

</div>

<div class="switch">


<ul>



<li>




<div class="on"></div>



</li>



<li></li>



<li></li>



<li></li>


</ul>

</div>
</div>