JSFiddle - React, Tailwind, and code Playground

HTML

<!-- HTML -->
<div class="sliding-banner" id="banner">
  <div class="slides">
    <div class="slide" style="background:#4f46e5">
      <div class="slide-content">Welcome to the Todo App — it's great seeing you here kkkkkkkkkkkkkkkkkkkkkkkkkkkkllllllllllllllllllllllllllllllllllllllllllIJASODVNDVKJFKJ</div>
    </div>
    <div class="slide" style="background:#06b6d4">
      <div class="slide-content">Stay organized</div>
    </div>
    <div class="slide" style="background:#f97316">
      <div class="slide-content">Focus on what matters</div>
    </div>
  </div>

  <button class="banner-arrow left" id="prev" aria-label="Previous">‹</button>
  <button class="banner-arrow right" id="next" aria-label="Next">›</button>

  <div class="banner-dots" id="dots"></div>
</div>

CSS

/* CSS */
.sliding-banner {
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  margin: 1rem 0;
  background: #222;
}

.sliding-banner .slides {
  display: flex;
  transition: transform 0.5s ease;
  width: 100%;
}

.sliding-banner .slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  color: white;
  padding: 1rem;
  box-sizing: border-box;
}

.slide-content {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  max-width: 90%;
}

.banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: rgba(0,0,0,0.25);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.banner-arrow.left { left: 8px; }
.banner-arrow.right { right: 8px; }

.banner-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  display: flex;
  gap: 6px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: none;
  cursor: pointer;
  padding: 0;
}

.dot.active { background: rgba(255,255,255,0.95); }

/* Responsive: smaller height on narrow screens */
@media (max-width: 480px) {
  .sliding-banner .slide { height: 120px; }
  .slide-content { font-size: 1rem; }
}

JavaScript

// JavaScript
document.addEventListener("DOMContentLoaded", function () {
  const banner = document.getElementById("banner");
  const slidesEl = banner.querySelector(".slides");
  const slides = Array.from(banner.querySelectorAll(".slide"));
  const prevBtn = document.getElementById("prev");
  const nextBtn = document.getElementById("next");
  const dotsContainer = document.getElementById("dots");

  let index = 0;
  const interval = 3000;
  let timer = null;

  // create dots
  slides.forEach((_, i) => {
    const btn = document.createElement("button");
    btn.className = i === 0 ? "dot active" : "dot";
    btn.setAttribute("aria-label", "Go to slide " + (i + 1));
    btn.addEventListener("click", () => goTo(i));
    dotsContainer.appendChild(btn);
  });

  const dots = Array.from(dotsContainer.children);

  function update() {
    slidesEl.style.transform = `translateX(-${index * 100}%)`;
    dots.forEach((d, i) => d.classList.toggle("active", i === index));
  }

  function start() {
    stop();
    timer = setInterval(() => {
      index = (index + 1) % slides.length;
      update();
    }, interval);
  }

  function stop() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  }

  function goTo(i) {
    index = i % slides.length;
    update();
    restartTimer();
  }

  function prev() {
    index = (index - 1 + slides.length) % slides.length;
    update();
    restartTimer();
  }

  function next() {
    index = (index + 1) % slides.length;
    update();
    restartTimer();
  }

  function restartTimer() {
    stop();
    start();
  }

  prevBtn.addEventListener("click", prev);
  nextBtn.addEventListener("click", next);

  banner.addEventListener("mouseenter", stop);
  banner.addEventListener("mouseleave", start);

  // initialize
  update();
  start();
});