Image Carousel Generator

<style>
.carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
}
.carousel-slide {
  display: none;
  width: 100%;
  opacity: 0; transition: opacity 300ms ease;
}
.carousel-slide.active {
  display: block;
  opacity: 1;
}
.carousel-slide img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 4px;
  z-index: 2;
}
.carousel-arrow:hover { background: rgba(0,0,0,0.8); }
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.carousel-dot.active { background: #fff; }
</style>

<div class="carousel">
    <div class="carousel-slide active">
      <img src="https://placehold.co/800x400/6366f1/ffffff?text=Slide+1" alt="Slide 1" />
    </div>
    <div class="carousel-slide">
      <img src="https://placehold.co/800x400/ec4899/ffffff?text=Slide+2" alt="Slide 2" />
    </div>
    <div class="carousel-slide">
      <img src="https://placehold.co/800x400/14b8a6/ffffff?text=Slide+3" alt="Slide 3" />
    </div>
    <div class="carousel-slide">
      <img src="https://placehold.co/800x400/f59e0b/ffffff?text=Slide+4" alt="Slide 4" />
    </div>
  <button class="carousel-arrow carousel-prev">&#10094;</button>
  <button class="carousel-arrow carousel-next">&#10095;</button>
  <div class="carousel-dots">
    <button class="carousel-dot active" data-index="0"></button>
    <button class="carousel-dot" data-index="1"></button>
    <button class="carousel-dot" data-index="2"></button>
    <button class="carousel-dot" data-index="3"></button>
  </div>
</div>

<script>
(function() {
  const carousel = document.querySelector(".carousel");
  const slides = carousel.querySelectorAll(".carousel-slide");
  const dots = carousel.querySelectorAll(".carousel-dot");
  let current = 0;
  function show(index) {
    slides.forEach(s => s.classList.remove("active"));
    dots.forEach(d => d.classList.remove("active"));
    current = (index + slides.length) % slides.length;
    slides[current].classList.add("active");
    if (dots[current]) dots[current].classList.add("active");
  }
  carousel.querySelector(".carousel-prev").addEventListener("click", () => show(current - 1));
  carousel.querySelector(".carousel-next").addEventListener("click", () => show(current + 1));
  dots.forEach((dot, i) => dot.addEventListener("click", () => show(i)));
  let timer = setInterval(() => show(current + 1), 3000);
  carousel.addEventListener("mouseenter", () => clearInterval(timer));
  carousel.addEventListener("mouseleave", () => { timer = setInterval(() => show(current + 1), 3000); });
})();
</script>