<div class="carouselWrapper">
  <div class="carouselContainer">
    <div class="carouselItem">
      <img height="100px" width="100%" src="//via.placeholder.com/1000x100/FFFF00/000000/?text=Carousel+Item+1" alt="" />
    </div>
    <div class="carouselItem">
      <img height="100px" width="100%" src="//via.placeholder.com/1000x100/FF0000/FFFFFF/?text=Carousel+Item+2" alt="" />
    </div>
    <div class="carouselItem">
      <img height="100px" width="100%" src="//via.placeholder.com/1000x100/00FF00/000000?text=Carousel+Item+3" alt="" />
    </div>
  </div>
</div>

.carouselWrapper {
  position: relative;
}

.carouselContainer {
  display: flex;
  flex-wrap: nowrap;
  scroll-behavior: smooth;
  overflow-x: auto;
  scrollbar-width: 0;
  scrollbar-color: transparent transparent;
  -ms-scroll-snap-type: x mandatory;
  scroll-snap-type: x mandatory;

  &::-webkit-scrollbar {
    display: none;
  }

  .carouselItem {
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 100%;
    scroll-snap-align: center;
  }
}

let index = 0;
const speed = 5;
const numberOfSlides = 3;
const carouselContainer = document.querySelector(".carouselContainer");
const carouselItemWidth = carouselContainer.scrollWidth / numberOfSlides;
setInterval(() => {
  carouselContainer.scrollBy(carouselItemWidth, 0);
  timeoutId = setTimeout(() => {
    index = index % numberOfSlides;
    let childToMove = carouselContainer.querySelectorAll(`.carouselItem`)[
      index
    ];
    childToMove.style.order =
      childToMove.style.order && childToMove.style.order === 0
        ? 1
        : +childToMove.style.order + 1;
    index++;
    clearTimeout(timeoutId);
  }, 1000);
}, speed * 1000);