The Logic Behind a Vanilla JS Slider

Creating an image slider from scratch is a great way to understand DOM manipulation. You don’t need heavy libraries like Swiper.js or Slick for basic needs. The logic works like a film strip.

1. The HTML Structure (The Window)

We create a main container called .slider-container with overflow: hidden. This acts as our “window” or viewport. Inside it, we have a .slides-wrapper (the film strip) that holds all images side-by-side.

2. CSS Styling (The Film Strip)

The wrapper is set to display: flex so images sit next to each other horizontally. Each slide is given min-width: 100% so it takes up the full width of the container. We use transition: transform to animate the movement smoothly.

3. JavaScript (The Projector)

The magic happens here. We keep track of a variable, usually called currentIndex.

• Next Button: Increases the index. If it exceeds the number of slides, it loops back to 0.
• Prev Button: Decreases the index. If it goes below 0, it loops to the last slide.
• Moving the Strip: We calculate how far to shift the strip using this formula: translateX( -currentIndex * 100% ). This slides the wrapper to the left, revealing the correct image.