JSFiddle - React, Tailwind, and code Playground

by S.M. Murad Hasan Tanvir

HTML

<div class="slider">
  <ul>
    <li><img src="http://placehold.it/350x150" alt="img1.jpg"></li>
    <li><img src="http://placehold.it/350x150" alt="img2.jpg"></li>
    <li><img src="http://placehold.it/350x150" alt="img3.jpg"></li>
    <li><img src="http://placehold.it/350x150" alt="img4.jpg"></li>
  </ul>
</div>

CSS

.slider{
width:95%;
margin:auto;
overflow:hidden;
}

.slider ul{
display:flex;
padding:0;
width:400%;
animation: cambio 20s infinite alternate;
}

.slider li{
width:100%;
list-style:none;
}

.slider img{
height:500px;
width:100%;
}

@keyframes cambio{

0% { margin-left:0; }
20% { margin-left:0; }


25% { margin-left:-100%; }
45% { margin-left:-100%; }

50% { margin-left:-200%; }
70% { margin-left:-200%; }

75% { margin-left:-300%; }
100% { margin-left:-300%; }
}