A pure HTML / CSS image slider that utilize checkbox and radio button tricks to slide through a list of images with arrows navigation and bullets pagination.
How to use it:
Create slider controls using radio buttons and labels.
<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">></label> <label id="arrow-2" class="arrows" for="button-2">></label> <label id="arrow-3" class="arrows" for="button-3">></label> <label id="arrow-4" class="arrows" for="button-4">></label> <label id="arrow-5" class="arrows" for="button-5">></label>
Insert a list of images into your web page as shown below:
<div id="slideshow-inner">
<ul>
<li id="slide1"> <img alt="" src="https://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>The required CSS / CSS3 rules to style the images slider.
#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 }See Also:
Lightweight Image Slider With Slide/Fade Transitions – SliderJS
Pure CSS Image Slider With Thumbnail Navigation
Basic Pure CSS Image Slider – slider.css
Pure JS / CSS Image Slider With A Masking Effect
Full Width Responsive Image Slider with JavaScript – Gallry.js
Automatic Image Slider with Pure CSS
Super Simple Image Slider In Vanilla JavaScript – Vanilla Slider
Fullscreen 3D Cube Slider with Pure CSS / CSS3
it is not working worst of my time