JSFiddle - React, Tailwind, and code Playground

HTML

<div class='slider'>
  <div class='slide1'>test</div>
  <div class='slide2'>test2</div>
  <div class='slide3'>test3</div>
</div>

CSS

.slider {
  min-width:560px;
  max-height: 250px;
  margin: 20px auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;

}
.slide1 {

      background-size: cover;
    animation:fade 8s linear infinite;
-webkit-animation:fade 8s linear infinite;
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -webkit-animation-delay: 1000s;
  animation-delay: 10s;


} 
.slide2 {
      background-size: cover;
    animation:fade2 8s infinite;
-webkit-animation:fade2 8s infinite;

 }
 
.slide3 {
      background-size: cover;
    animation:fade3 8s infinite;
-webkit-animation:fade3 8s infinite;

}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
  
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1}
  100% { opacity: 0}
}