Easy Carousel with Text

index.html

<div class="easy-slides">
  <div class="easy-slide active" style="background-image:url('https://source.unsplash.com/random/800x400');"></div>
  <div class="easy-slide" style="background-image:url('https://source.unsplash.com/random/700x400');"></div>
  <div class="easy-slide" style="background-image:url('https://source.unsplash.com/random/800x300');"></div>
  <div class="easy-slide-text">
    Hello World!
  </div>
</div>

scripts.js

const slides = document.querySelectorAll('.easy-slide');
let activeSlide = -1;
setInterval(function() {
  activeSlide++;
  updateSlide();
}, 5000);
function updateSlide() {
  slides.forEach((slide, i) => {
    if (activeSlide % 3 === i) {
      slide.classList.add('active');
    } else {
      slide.classList.remove('active');
    }
  })
}

style.css

.easy-slides, .easy-slide {
  height: 90vh;
}
.easy-slides {
  position: relative;
  background: #000;
}
.easy-slide {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -ms-transition: opacity 1s;
  -o-transition: opacity 1s;
}
.easy-slide.active {
  opacity: 0.6;
}
.easy-slide-text {
  position: absolute;
  width: 100%;
  padding: 0 10%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}