Slider 3D Cube de pantalla completa con CSS puro/CSS3

Vista prévia

Descripción

Una presentación de diapositivas HTML/CSS que le permite crear un control deslizante de imagen de pantalla completa con un efecto de volteo de cubo 3D de lujo creado por varias propiedades CSS3.

Funcionamiento

Incluya la hoja de estilo de núcleo en la sección principal del documento.

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

Cree el deslizador de cubo 3D con la estructura HTML simple y la casilla de verificación & trucos de etiqueta.

<div class="buttons-wrapper">


<input id="slide1" type="radio" name="slider" checked>

<input id="slide2" type="radio" name="slider">

<input id="slide3" type="radio" name="slider">

<input id="slide4" type="radio" name="slider">


<ul class="slider">


<li>



<div class="caption">




<h3>Slide One</h3>




<p>





Content One




</p>



</div>


</li>


<li>



<div class="caption">




<h3>Slide Two</h3>




<p>





Content Two




</p>



</div>


</li>


<li>



<div class="caption">




 <h3>Slide Three</h3>




<p>





Content Three




</p>



</div>


</li>


<li>



<div class="caption">




 <h3>Slide Four</h3>




<p>





Content Four




</p>



</div>


</li>

</ul>


<label for="slide1"></label>

<label for="slide2"></label>

<label for="slide3"></label>

<label for="slide4"></label>

</div>

Reemplaza las imágenes de fondo con las tuyas.

body .buttons-wrapper .slider > li:nth-child(1) {

background: url(1.jpg) no-repeat center center;
}

body .buttons-wrapper .slider > li:nth-child(2) {

background: url(2.jpg) no-repeat center center;
}

body .buttons-wrapper .slider > li:nth-child(3) {

background: url(3.jpg) no-repeat center center;
}

body .buttons-wrapper .slider > li:nth-child(4) {

background: url(4.jpg) no-repeat center center;
}