JSFiddle - React, Tailwind, and code Playground

by Aaron von Schassen

HTML

<div class="slider">
  <div class="image-wrapper">
    <img alt="" src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    
    <img src="http://www.hsv-arena.hamburg/wp-content/uploads/2017/06/BILD.jpg" alt="">
    
    <img alt="" src="https://i0.web.de/image/266/32486266,pd=1/angela-merkel.jpg">
    
    <img src="https://img0.etsystatic.com/210/1/15722300/il_340x270.1400672378_gcol.jpg" alt="">
  </div>
</div>

CSS

.slider {
  position: relative;
  width: 300px;
  height: 400px;
  overflow: hidden;
  border: 5px solid #fff;
  background: lightgrey;
}

.image-wrapper {
  display: flex;
}

.slider img {
  animation: slide 10s infinite;
  width: 100%;
  height: 100%;
  min-width: 300px;
}

@keyframes slide {
  0%, 15% {
    transform: translateX(0px)
  }
  25%, 40% {
    transform: translateX(-300px)
  }
  50%, 65% {
    transform: translateX(-600px)
  }
  75%, 90% {
    transform: translateX(-900px)
  }
  100% {
    transform: translateX(0px)
  }
}