JSFiddle - React, Tailwind, and code Playground

by WhiskeyT

HTML

<div class="slide animate" id="slide-02">
   <div class="image-rotator">
      <img src="https://s22.postimg.cc/7hgn7691t/pexels-photo-39803.jpg" alt="apple" />
      <img src="https://s22.postimg.cc/d5mxy25oh/bananas-fruit-carbohydrates-sweet-38283.jpg" alt="bananas" />
      <img src="https://s22.postimg.cc/hrj26ejht/pexels-photo-109274.jpg" alt="cherries" />
   </div>
</div>
<!-- #slide-02 -->

CSS

.slide {
   width: 100%;
   height: 100vh;
   position: relative;
}

#slide-02 .image-rotator {
   position: relative;
   /* width: 50%; */
   max-width: 300px;
   height: 100%;
   overflow: hidden;
   border: 1px solid lime;
}

#slide-02.animate .image-rotator img {
   position: absolute;
   top: 0;
   left: -450px;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 3px;
   /* animation: imgRotator 3s ease-in-out infinite 0s; */
}

#slide-02.animate .image-rotator img:nth-child(1) {
   animation: imgRotator 3s ease-in-out infinite 0s;
}

#slide-02.animate .image-rotator img:nth-child(2) {
   animation: imgRotator 3s ease-in-out infinite 3s;
}

#slide-02.animate .image-rotator img:nth-child(3) {
   animation: imgRotator 3s ease-in-out infinite 6s;
}

@keyframes imgRotator {
   0% {
      opacity: 0;
      left: 450px;
   }
   15%,
   84% {
      opacity: 1;
      left: 0;
   }
   100% {
      opacity: 0;
      left: -450px;
   }
}