CSS Slider Example - CSS - Do It Yourself

Type in your code below

<!DOCTYPE html>
<html>
<head>
<title>Pure CSS Slider Example</title>
<style>
       body{
    height: 100%;
    font-size: 3.3em;
    background-image:linear-gradient(to right,#3e5af5, #3e5);
    text-align: center;
}
input.add {
     display:none;
    }

#slider-container .overflow {
     width:400%;
      -webkit-transform:translateZ(0);
      -webkit-transition:all 0.5s ease-out;
      -moz-transition:all 0.5s ease-out;
      -o-transition:all 0.5s ease-out;
      transition:all 0.5s ease-out;

}

#slider-container .to-slide {
     width:25%;
     color: #114476;
      height:200px;
      line-height:200px;
      float:left;
      background:#fff;
    }

#toSlideOne:checked ~ .show-container .overflow {
     margin-left:0;
    }
#toSlideTwo:checked ~ .show-container .overflow {
     margin-left:-100%;
    }
#toSlideThree:checked ~ .show-container .overflow {
     margin-left:-200%;
    }
#toSlideFour:checked ~ .show-container .overflow {
     margin-left:-300%;
    }
#slider-container {
     margin:25vh auto; width:80%; position:relative;
    }
#slider-container .show-container {
     width:90%; overflow:hidden; margin:auto;
    }
.controls-slide {
     width:100%;

}
.controls-slide label {
     display:none;
      width:5%;
      height:60px;
      opacity:0.3; position:absolute; top:50%; margin-top:-30px; cursor:pointer; background: #fff;
    }
.controls-slide label:hover {
     opacity:0.8;
    }
#toSlideOne:checked ~ .controls-slide label:nth-child(2), #toSlideTwo:checked ~ .controls-slide label:nth-child(3), #toSlideThree:checked ~ .controls-slide label:nth-child(4) {
     right:0; display:block;
    }
#toSlideTwo:checked ~ .controls-slide label:nth-child(1), #toSlideThree:checked ~ .controls-slide label:nth-child(2), #toSlideFour:checked ~ .controls-slide label:nth-child(3) {
     left:0; display:block;
    }
    </style>
</head>
<body>
<div id="slider-container">
<input checked="" class="add" id="toSlideOne" name="slider" type="radio"/>
<input class="add" id="toSlideTwo" name="slider" type="radio"/>
<input class="add" id="toSlideThree" name="slider" type="radio"/>
<input class="add" id="toSlideFour" name="slider" type="radio"/>
<div class="show-container">
<div class="overflow">
<div class="to-slide">1 (I AM ONE)</div>
<div class="to-slide">2 (I AM TWO)</div>
<div class="to-slide">3 (I AM THREE)</div>
<div class="to-slide">4 (I AM FOUR)</div>
</div>
</div>
<div class="controls-slide">
<label for="toSlideOne"></label>
<label for="toSlideTwo"></label>
<label for="toSlideThree"></label>
<label for="toSlideFour"></label>
</div>
</div>
</body>
</html>