Carousel
Slides you swipe, scroll or step through
Slides
Arrow keys, buttons and dots all work.
Code
<div class="carousel" data-carousel role="region" aria-roledescription="carousel" aria-label="Featured">
<div class="carousel-track" tabindex="0"><div class="carousel-slide" role="group" aria-roledescription="slide" aria-label="1 of 4"><img class="pic" src="assets/images/placeholder.svg" alt="Morning light" loading="lazy"></div><div class="carousel-slide" role="group" aria-roledescription="slide" aria-label="2 of 4"><img class="pic" src="assets/images/placeholder.svg" alt="Harbour walk" loading="lazy"></div><div class="carousel-slide" role="group" aria-roledescription="slide" aria-label="3 of 4"><img class="pic" src="assets/images/placeholder.svg" alt="Blue hour" loading="lazy"></div><div class="carousel-slide" role="group" aria-roledescription="slide" aria-label="4 of 4"><img class="pic" src="assets/images/placeholder.svg" alt="Long table" loading="lazy"></div></div><button type="button" class="btn btn-glass btn-icon carousel-prev" aria-label="Previous slide" data-carousel-prev><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><button type="button" class="btn btn-glass btn-icon carousel-next" aria-label="Next slide" data-carousel-next><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><div class="carousel-dots"><button type="button" aria-label="Go to slide 1" aria-current="true" data-slide="0"></button><button type="button" aria-label="Go to slide 2" data-slide="1"></button><button type="button" aria-label="Go to slide 3" data-slide="2"></button><button type="button" aria-label="Go to slide 4" data-slide="3"></button></div>
</div>