Image Slider

			<section class="slider" aria-label="Photos">
				<!-- The window shows one slide; the track holds them all in a row. -->
				<div class="slider-window">
					<!-- A list, so screen readers say how many photos there are. -->
					<ul class="slider-track" id="track">

						<li class="slide">
							<figure>
								<!-- alt describes the photo; width and height reserve its space. -->
								<img
									src="images/fjord.jpg"
									alt="A deep blue fjord between rocky cliffs, with hikers resting on a ledge in front"
									width="960"
									height="600"
								/>
								<figcaption>
									<strong>Fjord</strong>
									<span class="photo-credit">Photo by Alexey Topolyanskiy on Unsplash</span>
								</figcaption>
							</figure>

					<!-- aria-live reads out "Slide 2 of 4" after each move. -->
					<p class="slider-count" id="count" aria-live="polite">Slide 1 of 4</p>

				<!-- One dot per slide; aria-current marks the one showing. -->
				<div class="slider-dots" id="dots">
					<button type="button" class="dot" aria-label="Go to slide 1"></button>
					<button type="button" class="dot" aria-label="Go to slide 2"></button>
					<button type="button" class="dot" aria-label="Go to slide 3"></button>
					<button type="button" class="dot" aria-label="Go to slide 4"></button>
				</div>

/* overflow: hidden crops the track, so only one slide shows through. */
.slider-window {
	overflow: hidden;
	border-radius: 1rem;
}

/* JavaScript moves the whole track sideways; transition animates it. */
.slider-track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.slider-track {
		transition: none;
	}
}

/* Scale the photo to the slide, and crop rather than squash it. */
.slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* A dark fade behind the caption keeps white text readable on any photo. */
.slide figcaption {
	position: absolute;
	inset: auto 0 0;
	padding: 2.5rem 1rem 0.875rem;
	background: linear-gradient(transparent, rgb(0 0 0 / 0.7));
	color: #ffffff;
}

/* The dot is small, but its padding makes it easy to tap. */
.dot {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0.5rem;
	border: 0;
	border-radius: 999px;
	background: #d4d4da content-box;
	cursor: pointer;
}

/* The attribute screen readers use also styles the current dot. */
.dot[aria-current="true"] {
	background-color: #1c1c22;
}

// Which slide is showing, counted from 0.
let current = 0;

function showSlide(index) {
	// % wraps round: one past the last slide is the first again, and one
	// before the first is the last. Adding the length keeps it above zero.
	current = (index + slides.length) % slides.length;

	// Each slide is the track's full width, so index 2 sits at -200%.
	track.style.transform = `translateX(-${current * 100}%)`;
	countDisplay.textContent = `Slide ${current + 1} of ${slides.length}`;

	// Slides out of view are still in the page, so hide them from screen readers.
	slides.forEach((slide, slideIndex) => {
		slide.inert = slideIndex !== current;
	});

	// The dots follow the same index as the slides.
	dots.forEach((dot, dotIndex) => {
		dot.setAttribute("aria-current", dotIndex === current);
	});
}

previousButton.addEventListener("click", () => showSlide(current - 1));
nextButton.addEventListener("click", () => showSlide(current + 1));

	// % wraps round: one past the last slide is the first again, and one
	// before the first is the last. Adding the length keeps it above zero.
	current = (index + slides.length) % slides.length;

	// Each slide is the track's full width, so index 2 sits at -200%.
	track.style.transform = `translateX(-${current * 100}%)`;
	countDisplay.textContent = `Slide ${current + 1} of ${slides.length}`;

	// Slides out of view are still in the page, so hide them from screen readers.
	slides.forEach((slide, slideIndex) => {
		slide.inert = slideIndex !== current;
	});

	// The dots follow the same index as the slides.
	dots.forEach((dot, dotIndex) => {
		dot.setAttribute("aria-current", dotIndex === current);
	});
}

previousButton.addEventListener("click", () => showSlide(current - 1));
nextButton.addEventListener("click", () => showSlide(current + 1));

// Each dot jumps straight to its own slide.
dots.forEach((dot, dotIndex) => {
	dot.addEventListener("click", () => showSlide(dotIndex));
});