JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
  <ul class="slider-list">
    <li class="slider-list-item slide1"><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img1.jpg" alt=""></li>
    <li class="slider-list-item slide2"><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img2.jpg" alt=""></li>
    <li class="slider-list-item slide3"><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img3.jpg" alt=""></li>
    <li class="slider-list-item slide4"><img src="http://lab.risewill.co.jp/images/web-design/action-sample-img4.jpg" alt=""></li>
  </ul>
</div>

SCSS

.slider {
  position: relative;
  overflow: hidden;
  margin: 10px;
  width: 280px;
}

.slider-list {
  position: relative;
  list-style: none;
}

.slider-list-item {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;

  img {
    width: 100%;
    height: auto;
    vertical-align: top;
  }
}

/* slider animation */
.slider-list .slide1 {
  position: relative;
}

.slider-list .slider-list-item {
  animation: slidshow 24s infinite;
}

@keyframes slidshow {
  0% {
    transform: translateX(0);
  }

  21% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(100%);
  }

  25.001% {
    transform: translateX(-100%);
  }

  96% {
  transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

.slider-list .slide1 {
  animation-delay: 0s;
}

.slider-list .slide2 {
  animation-delay: -18s;
}

.slider-list .slide3 {
  animation-delay: -12s;
}

.slider-list .slide4 {
    animation-delay: -6s;
}