Vanilla JS Image Slider

What’s happening on this page?

This slider is built with vanilla JavaScript (no jQuery and no plugins). Instead of calling a library function, we wrote the slider logic ourselves in javascript-slider.js.

1) The HTML (structure)

.viewport is the “window” that shows the images.
.track is a long strip that holds every slide side-by-side.
Each .slide is exactly 100% of the viewport width.
The arrow buttons and dot buttons are normal HTML buttons.

2) The CSS (appearance + layout)

.viewport uses overflow: hidden so off-screen slides don’t show.
.track uses display:flex to line slides up horizontally.
transition:transform ... creates the smooth sliding animation.
Image sizing uses a fixed slider “window” height with:
- object-fit: cover; crops image to fill the window
- contain; shows the entire image (may letterbox).

3) The JavaScript (behavior)

The JavaScript keeps track of one main value: the current slide index (0, 1, 2, 3). When the index changes, we:

Move the track with transform: translateX(...)
Update which dot has the .active class

Customization ideas

Change the “window” size

In javascript-slider.css, adjust the height on .slide img.

/* TRY THIS: change slider height */
.slide img {
  height: 350px; /* try 250px, 400px, 500px */
}

Crop vs. fit the whole image

/* cover = fills frame (crops) | contain = shows whole image (letterbox) */
.slide img {
  object-fit: cover;   /* try contain */
}

Change the animation speed

The speed is controlled by CSS (not JavaScript) because we’re animating the transform.

/* TRY THIS: faster/slower slide animation */
.track {
  transition: transform 0.35s ease; /* try 0.2s or 0.6s */
}

Change the look of arrows and dots

Edit .nav styles for arrow size, color, and background.
Edit .dot and .dot.active styles for the indicators.

Troubleshooting checklist

If nothing moves when you click arrows, open DevTools → Console for errors.
Make sure the class names match between HTML / CSS / JS (.track, .dot, etc.).
Make sure your image paths are correct.
If the script is in the <head>, it must use defer (like this page does).