How to Build an Image Carousel in an Interview

How to Build an Image Carousel in an Interview

The image carousel is a common machine coding question. Here is how to build it with auto-play, dots, and navigation.

Requirements

• Display one image at a time.
• Next/prev buttons.
• Dot indicators (click to jump).
• Auto-play (advance every 3 seconds).
• Infinite loop (after the last, go to the first).
• Smooth transition.

Plan (5-10 minutes)

1. HTML: a container, image strip, prev/next buttons, dots.
2. State: current index.
3. Events: next, prev, dot click, auto-play (setInterval).
4. CSS: overflow hidden, flex strip, transition.

Build Core (50 minutes)

HTML

<div class="carousel">
  <div class="carousel-track" id="track">
    <img src="img1.jpg" class="carousel-slide" />
    <img src="img2.jpg" class="carousel-slide" />
    <img src="img3.jpg" class="carousel-slide" />
  </div>
  <button class="carousel-btn prev" onclick="prev()">‹</button>
  <button class="carousel-btn next" onclick="next()">›</button>
  <div class="carousel-dots" id="dots"></div>
</div>

JavaScript

const slides = document.querySelectorAll(".carousel-slide");
const track = document.getElementById("track");
const dotsContainer = document.getElementById("dots");
let currentIndex = 0;

// create dots
slides.forEach((_, i) => {
  const dot = document.createElement("span");
  dot.className = "dot";
  dot.addEventListener("click", () => goTo(i));
  dotsContainer.appendChild(dot);
});

function update() {
  track.style.transform = `translateX(-${currentIndex * 100}%)`;
  document.querySelectorAll(".dot").forEach((d, i) => {
    d.classList.toggle("active", i === currentIndex);
  });
}

function next() {
  currentIndex = (currentIndex + 1) % slides.length;
  update();
}

function prev() {
  currentIndex = (currentIndex - 1 + slides.length) % slides.length;
  update();
}

function goTo(index) {
  currentIndex = index;
  update();
}

// auto-play
let autoPlay = setInterval(next, 3000);

CSS

.carousel { position: relative; overflow: hidden; width: 600px; margin: 0 auto; }
.carousel-track { display: flex; transition: transform 0.3s ease; }
.carousel-slide { min-width: 100%; height: 400px; object-fit: cover; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; }
.prev { left: 10px; } .next { right: 10px; }
.carousel-dots { text-align: center; margin-top: 10px; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ccc; margin: 0 5px; cursor: pointer; }
.dot.active { background: #007bff; }

Edge Cases (20 minutes)

• Pause auto-play on hover.
• Resume auto-play on mouse leave.
• Touch/swipe support for mobile.
• Single image (hide controls).
• Wrap around (infinite loop).

Pause on Hover

document.querySelector(".carousel").addEventListener("mouseenter", () => clearInterval(autoPlay));
document.querySelector(".carousel").addEventListener("mouseleave", () => { autoPlay = setInterval(next, 3000); });

The Takeaway

Build the carousel: HTML (container, flex track of images, buttons, dots), JavaScript (translateX for sliding, next/prev with modulo for infinite loop, dots, auto-play with setInterval), CSS (overflow hidden, transition, dot styling). Handle pause on hover and swipe for mobile.