Dot Pagination Carousel — Free HTML CSS JS Slide Carousel Snippet

<div class="carousel" id="carousel">
  <div class="carousel-track" id="carouselTrack">
    <div class="slide slide-1"><span>Slide 1</span></div>
    <div class="slide slide-2"><span>Slide 2</span></div>
    <div class="slide slide-3"><span>Slide 3</span></div>
    <div class="slide slide-4"><span>Slide 4</span></div>
  </div>
  <button class="arrow arrow-prev" onclick="moveSlide(-1)" aria-label="Previous slide">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><path d="M15 18l-6-6 6-6"/></svg>
  </button>
  <button class="arrow arrow-next" onclick="moveSlide(1)" aria-label="Next slide">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5"><path d="M9 18l6-6-6-6"/></svg>
  </button>
  <div class="dots" id="dots" role="tablist" aria-label="Slide navigation">
    <button class="dot active" onclick="goToSlide(0)" aria-label="Go to slide 1"></button>
    <button class="dot" onclick="goToSlide(1)" aria-label="Go to slide 2"></button>
    <button class="dot" onclick="goToSlide(2)" aria-label="Go to slide 3"></button>
    <button class="dot" onclick="goToSlide(3)" aria-label="Go to slide 4"></button>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; padding: 24px; display: flex; align-items: center; flex-direction: column; gap: 20px; justify-content: center; min-height: 100vh; }

.carousel { position: relative; max-width: 480px; margin: 0 auto; border-radius: 14px; overflow: hidden; }

.carousel-track { display: flex; transition: transform 0.4s ease; }

.slide { min-width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; }
.slide span { font-size: 20px; font-weight: 700; color: #fff; }
.slide-1 { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.slide-2 { background: linear-gradient(135deg, #ec4899, #db2777); }
.slide-3 { background: linear-gradient(135deg, #10b981, #059669); }
.slide-4 { background: linear-gradient(135deg, #f59e0b, #d97706); }

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(15,23,42,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.arrow:hover { background: rgba(15,23,42,0.55); }
.arrow-prev { left: 12px; }
.arrow-next { right: 12px; }

.dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, width 0.2s;
}
.dot.active { background: #fff; width: 22px; border-radius: 4px; }

const track = document.getElementById('carouselTrack');
const dots = document.querySelectorAll('.dot');
const totalSlides = document.querySelectorAll('.slide').length;
let currentIndex = 0;

function renderSlide() {
  track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)';
  dots.forEach((dot, i) => dot.classList.toggle('active', i === currentIndex));
}

function goToSlide(index) {
  currentIndex = index;
  renderSlide();
}

function moveSlide(delta) {
  currentIndex = (currentIndex + delta + totalSlides) % totalSlides;
  renderSlide();
}

renderSlide();