simple-pure-css-slider-webinhindi.com

by VIvek Vaishnav

HTML

<div id="slider">      
       <div>
            <img src="https://cdn.pixabay.com/photo/2017/10/20/17/40/alpine-2872096__340.jpg">
        </div>
        <div>
            <img src="https://cdn.pixabay.com/photo/2017/09/16/00/42/tiger-2754163__340.jpg">
        </div>
        <div>
            <img src="https://cdn.pixabay.com/photo/2017/10/20/17/40/alpine-2872095__340.jpg">
        </div>
        <div>
            <img src="https://cdn.pixabay.com/photo/2017/10/20/17/40/alpine-2872094_960_720.jpg">
        </div>   
</div>

CSS

body {
  margin: 10px;
  background-color: #F3F3F3;
}
div#slider {
  overflow: hidden;
  margin: auto;
  width: 50%;
  max-width: 700px;
  max-height: 400px;
}
div#slider div {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  font-size: 0;
  animation: 20s slider infinite;
}
div#slider div img {
  width: 20%;
  float: left;
}
@keyframes slider {
  0% { left: 0%;}
  20% { left: 0%;}
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%;}
  75% { left: -300%;}
  95% { left: -300%;}
}