Carousel

					<!-- Moving content needs a way to stop it; the label says what it'll do. -->
					<button type="button" class="control control-wide" id="play-pause">
						Pause
					</button>

			<!-- A list, so screen readers say how many cards there are. -->
			<ul class="carousel" id="carousel" aria-label="Fruit" tabindex="0">
				<li class="card card-mango">
					<span class="card-emoji" aria-hidden="true">🥭</span>
					<h2 class="card-title">Mango</h2>
					<p class="card-text">Sweet, juicy, and best eaten over the sink.</p>
				</li>

/* A row of cards that scrolls sideways and snaps to the start of a card. */
.carousel {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	list-style: none;
	border-radius: 1rem;
}

@media (prefers-reduced-motion: reduce) {
	.carousel {
		scroll-behavior: auto;
	}
}

/* Each card is a fixed share of the row, so two or three show at once. */
.card {
	flex: 0 0 min(14rem, 80%);
	padding: 1.5rem;
	border-radius: 1rem;
	scroll-snap-align: start;
}

// One step is one card's width plus the gap after it.
function stepSize() {
	const card = carousel.querySelector(".card");
	const gap = parseFloat(getComputedStyle(carousel).columnGap);
	return card.offsetWidth + gap;
}

function scrollNext() {
	// At the end, go back to the start instead of stopping.
	const isAtEnd =
		carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth - 1;
	if (isAtEnd) {
		carousel.scrollTo({ left: 0 });
	} else {
		carousel.scrollBy({ left: stepSize() });
	}
}

function scrollPrevious() {
	carousel.scrollBy({ left: -stepSize() });
}

// How long each card stays before the next one, in milliseconds.
const DELAY = 4000;

// One step is one card's width plus the gap after it.
function stepSize() {
	const card = carousel.querySelector(".card");
	const gap = parseFloat(getComputedStyle(carousel).columnGap);
	return card.offsetWidth + gap;
}

function scrollNext() {
	// At the end, go back to the start instead of stopping.
	const isAtEnd =
		carousel.scrollLeft + carousel.clientWidth >= carousel.scrollWidth - 1;
	if (isAtEnd) {
		carousel.scrollTo({ left: 0 });
	} else {
		carousel.scrollBy({ left: stepSize() });
	}
}

function scrollPrevious() {
	carousel.scrollBy({ left: -stepSize() });
}

// Don't start moving for people who've asked their device for less motion.
let isPlaying = !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
// True while the pointer or keyboard focus is on the cards.
let isHeld = false;
// setInterval returns an id; clearInterval needs it to stop the timer.
let timer = null;

// One place decides whether the timer runs, so the rules can't clash.
function updatePlayback() {
	clearInterval(timer);
	if (isPlaying && !isHeld) {
		timer = setInterval(scrollNext, DELAY);
	}
	playPauseButton.textContent = isPlaying ? "Pause" : "Play";
}

// Don't start moving for people who've asked their device for less motion.
let isPlaying = !window.matchMedia("(prefers-reduced-motion: reduce)").matches;

// True while the pointer or keyboard focus is on the cards.
let isHeld = false;
// setInterval returns an id; clearInterval needs it to stop the timer.
let timer = null;

// One place decides whether the timer runs, so the rules can't clash.
function updatePlayback() {
	clearInterval(timer);
	if (isPlaying && !isHeld) {
		timer = setInterval(scrollNext, DELAY);
	}
	playPauseButton.textContent = isPlaying ? "Pause" : "Play";
}

playPauseButton.addEventListener("click", () => {
	isPlaying = !isPlaying;
	updatePlayback();
});

// Hold still while someone is reading or using the cards.
function hold() {
	isHeld = true;
	updatePlayback();
}

function release() {
	isHeld = false;
	updatePlayback();
}

carousel.addEventListener("mouseenter", hold);
carousel.addEventListener("mouseleave", release);
carousel.addEventListener("focusin", hold);
carousel.addEventListener("focusout", release);