React · Theory

Carousel in React

Theory

62/94

Carousel in React

Carousel = array of slides + index state. Next: setI(i => (i + 1) % n). Prev similar. Optional autoplay is useEffect + interval + cleanup. Accessibility: buttons labelled, pause on focus. Libraries exist; a 10-line version proves you understand state.

Carousel in React — start A. Next → B. Modulo wraps to A after C.

Exam tip

Index state + modulo next.

Example

// Carousel
import { useState } from "react";

const slides = ["A", "B", "C"];

export default function Carousel() {
  const [i, setI] = useState(0);
  return (
    <div>
      <p>{slides[i]}</p>
      <button onClick={() => setI((x) => (x + 1) % slides.length)}>Next</button>
    </div>
  );
}

Carousel in React — start A. Next → B. Modulo wraps to A after C.

Short notes

DefState : index.
RuleNext : modulo wrap.
RememberAutoplay : effect + cleanup.

React · Theory

Carousel in React

← All stacks

Theory

62/94

Carousel in React

Carousel in React — start A. Next → B. Modulo wraps to A after C.

Exam tip

Index state + modulo next.

Example

// Carousel
import { useState } from "react";

const slides = ["A", "B", "C"];

export default function Carousel() {
  const [i, setI] = useState(0);
  return (
    <div>
      <p>{slides[i]}</p>
      <button onClick={() => setI((x) => (x + 1) % slides.length)}>Next</button>
    </div>
  );
}

Carousel in React — start A. Next → B. Modulo wraps to A after C.

Short notes

DefState : index.
RuleNext : modulo wrap.
RememberAutoplay : effect + cleanup.

Carousel in React

Example

Short notes

Questions

Carousel in React

Example

Short notes

Questions