javascript 51 lines · 9 steps

Building an accessible auto-playing carousel

A self-contained Carousel class that cycles slides on a timer while respecting hover, tab visibility, and screen readers.

Explained by highlit

Intermediate dom state-management timers accessibility event-handling

1class Carousel {
constructor(root, { interval = 5000 } = {}) {
  this.root = root;
  this.track = root.querySelector('.carousel__track');
  this.slides = Array.from(root.querySelectorAll('.carousel__slide'));
  this.dots = Array.from(root.querySelectorAll('.carousel__dot'));
  this.interval = interval;
  this.index = 0;
  this.timer = null;
10 
  this.root.addEventListener('mouseenter', () => this.pause());
  this.root.addEventListener('mouseleave', () => this.play());
  this.dots.forEach((dot, i) => dot.addEventListener('click', () => this.goTo(i)));
  document.addEventListener('visibilitychange', () =>
    document.hidden ? this.pause() : this.play()
  );
17 
  this.render();
  this.play();
}
21 
render() {
  this.track.style.transform = `translateX(-${this.index * 100}%)`;
  this.slides.forEach((slide, i) =>
    slide.setAttribute('aria-hidden', String(i !== this.index))
  );
  this.dots.forEach((dot, i) =>
    dot.classList.toggle('is-active', i === this.index)
  );
}
31 
goTo(index) {
  this.index = (index + this.slides.length) % this.slides.length;
  this.render();
  this.play();
}
37 
next() {
  this.goTo(this.index + 1);
}
41 
play() {
  this.pause();
  this.timer = setInterval(() => this.next(), this.interval);
}
46 
pause() {
  clearInterval(this.timer);
  this.timer = null;
}
51}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Storing a single index and re-deriving the DOM from it keeps UI state predictable.
2Pausing timers on hover and tab-hidden avoids wasted work and jarring jumps.
3Toggling aria-hidden alongside visual state keeps assistive tech in sync with what's shown.

Related explainers

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

func (w *Watcher) resetDebounce(d time.Duration) {
	if !w.timer.Stop() {
		select {
		case <-w.timer.C:

Debouncing a stream of events in Go

debounce timers channels

Advanced 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);