Dot Pagination Carousel — Free HTML CSS JS Slide Carousel Snippet

Carousels are everywhere — hero banners, testimonial rotators, onboarding screens — and the dot-indicator-plus-arrows combination is the most recognizable navigation pattern for them. This snippet builds a complete carousel using a single sliding track and a row of clickable dots, with the currently active dot rendered as a wider pill rather than just a differently colored circle.

How the sliding mechanism works

All slides sit side by side inside .carousel-track with display: flex, each slide set to min-width: 100% so exactly one slide fills the visible .carousel viewport at a time (overflow: hidden on the parent hides the rest). Moving between slides is a single CSS transform: track.style.transform = 'translateX(-' + (currentIndex * 100) + '%)'. To show slide index 2, the track shifts left by exactly 200% of its own width — since each slide is 100% of the viewport, sliding by a multiple of 100% always lines up a slide exactly with the viewport. The transition: transform 0.4s ease on the track is what makes that jump animate smoothly instead of snapping.

How the dots and arrows share one state

There is exactly one source of truth: the currentIndex variable. Both goToSlide(index) (called by clicking a dot) and moveSlide(delta) (called by clicking an arrow, passing +1 or -1) do nothing but update currentIndex and then call the single renderSlide() function, which both moves the track and updates which dot has the .active class. This means dots and arrows can never disagree about which slide is showing — they're just two different ways of changing the same variable.

How the arrows wrap around

moveSlide computes (currentIndex + delta + totalSlides) % totalSlides. Adding totalSlides before the modulo is what correctly handles the "previous" click from slide 0 — without it, (0 - 1) % 4 would evaluate to -1 in JavaScript (a negative number, not a valid array-style wraparound), rather than the desired 3.

How the active dot pill effect works

The .dot.active class doesn't just change background — it also grows width from 8px to 22px and rounds the corners slightly less (border-radius: 4px instead of 50%), turning a circle into a short pill. This is a purely cosmetic CSS transition layered on top of the same class toggle used for the color change.