Checkbox & Radio Based Image Slider

Preview:

Description:

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

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 }