CheckBox & deslizador de imagen basada en radio

Vista prévia

Descripción

Un control deslizante de imagen HTML/CSS puro que utiliza la casilla de verificación y los trucos de botón de radio para deslizarse a través de una lista de imágenes con navegación de flechas y paginación de viñetas.

Funcionamiento

Cree controles deslizantes mediante botones de radio y etiquetas.

<input id="button-1" type="radio" checked="checked" name="controls" />
<label for="button-1"></label>
<input id="button-2" type="radio" name="controls" />
<label for="button-2"></label>
<input id="button-3" type="radio" name="controls" />
<label for="button-3"></label>
<input id="button-4" type="radio" name="controls" />
<label for="button-4"></label>
<input id="button-5" type="radio" name="controls" />
<label for="button-5"></label>
<label id="arrow-1" class="arrows" for="button-1">&gt;</label>
<label id="arrow-2" class="arrows" for="button-2">&gt;</label>
<label id="arrow-3" class="arrows" for="button-3">&gt;</label>
<label id="arrow-4" class="arrows" for="button-4">&gt;</label>
<label id="arrow-5" class="arrows" for="button-5">&gt;</label>

Inserte una lista de imágenes en su página web como se muestra a continuación:

<div id="slideshow-inner">

<ul>


<li id="slide1"> <img alt="" src="http://placehold.it/890x380" />



<div class="description">




<input id="show-description-1" type="checkbox" />




<label class="show-description-label" for="show-description-1">I</label>




<div class="description-text">





<h2>Flower power</h2>





<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>




</div>



</div>


</li>


<li id="slide2"> <img alt="" src="https://i1065.photobucket.com/albums/u381/jana2511/NL5/ipad-605439_1920_zpsb04bojgw.jpg" />



<div class="description">




<input id="show-description-2" type="checkbox" />




<label class="show-description-label" for="show-description-2">I</label>




<div class="description-text">





<h2>Golden sunset</h2>





<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>




</div>



</div>


</li>


<li id="slide3"> <img alt="" src="https://i1065.photobucket.com/albums/u381/jana2511/NL5/MomPreneurs_virtuell_arbeiten_zpsusllhcnu.jpg" />



<div class="description">




<input id="show-description-3" type="checkbox" />




<label class="show-description-label" for="show-description-3">I</label>




<div class="description-text">





<h2>Flower power again</h2>





<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>




</div>



</div>


</li>


<li id="slide4"> <img alt="" src="https://i1065.photobucket.com/albums/u381/jana2511/NL5/7222620906_4e9be70f1d_k_zpsfjc8rjli.jpg" />



<div class="description">




<input id="show-description-4" type="checkbox" />




<label class="show-description-label" for="show-description-4">I</label>




<div class="description-text">





<h2>Stormy coast</h2>





<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>




</div>



</div>


</li>


<li id="slide5"> <img alt="" src="https://i1065.photobucket.com/albums/u381/jana2511/NL4/office-620822_1920-1050x700_zpsgpfln1f2.jpg" />



<div class="description">




<input id="show-description-5" type="checkbox" />




<label class="show-description-label" for="show-description-5">I</label>




<div class="description-text">





<h2>Splash!</h2>





<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>




</div>



</div>


</li>

</ul>
</div>

Las reglas CSS/CSS3 requeridas para el estilo del deslizador de imágenes.

#slideshow-inner {

width: 100%;

height: 100%;

background-color: rgb(0,0,0);

overflow: hidden;

position: relative;
}

#slideshow-inner>ul {

list-style: none;

height: 100%;

width: 500%;

overflow: hidden;

position: relative;

left: 0px;

-webkit-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);

-moz-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);

-o-transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);

transition: left .8s cubic-bezier(0.77, 0, 0.175, 1);
}

#slideshow-inner>ul>li {

width: 20%;

height: 380px;

float: left;

position: relative;
}

#slideshow-inner>ul>li>img {

margin: auto;

width: 100%;

position: relative;/*top: -50%;*/
}

#slideshow-wrap input[type=radio] {

position: absolute;

left: 50%;

bottom: 15px;

z-index: 100;

visibility: hidden;
}

#slideshow-wrap label:not(.arrows):not(.show-description-label) {

position: absolute;

left: 50%;

bottom: -45px;

z-index: 100;

width: 12px;

height: 12px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

cursor: pointer;

-webkit-box-shadow: 0px 0px 1px rgba(0,0,0,.8);

-moz-box-shadow: 0px 0px 1px rgba(0,0,0,.8);

box-shadow: 0px 0px 1px rgba(0,0,0,.8);

-webkit-transition: background-color .2s;

-moz-transition: background-color .2s;

-o-transition: background-color .2s;

transition: background-color .2s;
}

#slideshow-wrap label:not(.arrows):active { bottom: -46px }

#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-4:checked~label[for=button-4] { background-color: rgba(100,100,100,1) }

#slideshow-wrap input[type=radio]#button-5:checked~label[for=button-5] { background-color: rgba(100,100,100,1) }

#slideshow-wrap label[for=button-1] { margin-left: -36px }

#slideshow-wrap label[for=button-2] { margin-left: -18px }

#slideshow-wrap label[for=button-4] { margin-left: 18px }

#slideshow-wrap label[for=button-5] { margin-left: 36px }

#slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

#slideshow-wrap input[type=radio]#button-2:checked~#slideshow-inner>ul { left: -100% }

#slideshow-wrap input[type=radio]#button-3:checked~#slideshow-inner>ul { left: -200% }

#slideshow-wrap input[type=radio]#button-4:checked~#slideshow-inner>ul { left: -300% }

#slideshow-wrap input[type=radio]#button-5:checked~#slideshow-inner>ul { left: -400% }

label.arrows {

font-family: 'Arial';

font-size: 25px;

color: rgb(255,255,240);

position: absolute;

top: 50%;

margin-top: -25px;

display: none;

opacity: 0.7;

cursor: pointer;

z-index: 1000;

background-color: transparent;

-webkit-transition: opacity .2s;

-moz-transition: opacity .2s;

-o-transition: opacity .2s;

transition: opacity .2s;

text-shadow: 0px 0px 3px rgba(0,0,0,.8);
}

label.arrows:hover { opacity: 1 }

label.arrows:active { margin-top: -23px }

input[type=radio]#button-1:checked~.arrows#arrow-2,
input[type=radio]#button-2:checked~.arrows#arrow-3,
input[type=radio]#button-3:checked~.arrows#arrow-4,
input[type=radio]#button-4:checked~.arrows#arrow-5 {

right: -55px;

display: block;
}

input[type=radio]#button-2:checked~.arrows#arrow-1,
input[type=radio]#button-3:checked~.arrows#arrow-2,
input[type=radio]#button-4:checked~.arrows#arrow-3,
input[type=radio]#button-5:checked~.arrows#arrow-4 {

left: -55px;

display: block;

-webkit-transform: scaleX(-1);

-moz-transform: scaleX(-1);

-ms-transform: scaleX(-1);

-o-transform: scaleX(-1);

transform: scaleX(-1);
}

input[type=radio]#button-2:checked~.arrows#arrow-1 { left: -19px }

input[type=radio]#button-3:checked~.arrows#arrow-2 { left: -37px }

input[type=radio]#button-5:checked~.arrows#arrow-4 { left: -73px }

.description {

position: absolute;

top: 0;

left: 0;

width: 260px;

font-family: 'Arial';

z-index: 1000;
}

.description input { visibility: hidden }

.description label {

font-family: 'Arial';

background-color: white;

position: relative;

left: -17px;

top: 00px;

width: 40px;

height: 27px;

display: inline-block;

text-align: center;

padding-top: 7px;

/* border-bottom-right-radius: 15px; */

cursor: pointer;

opacity: 0;

-webkit-transition: opacity .2s;

-moz-transition: opacity .2s;

-o-transition: opacity .2s;

transition: opacity .2s;

z-index: 5;

color: rgb(20,20,20);
}

#slideshow-inner>ul>li:hover .description label { opacity: 1 }

.description input[type=checkbox]:checked~label { opacity: 1 }

.description .description-text {

background-color: rgba(255,255,255,.5);

padding: 45px;

position: relative;

top: -35px;

z-index: 4;

opacity: 0;

-webkit-transition: opacity .2s;

-moz-transition: opacity .2s;

-o-transition: opacity .2s;

transition: opacity .2s;

color: rgb(20,20,20);
}

.description input[type=checkbox]:checked~.description-text { opacity: 1 }