Carousel
Carousels, also known as slideshows, are used to stack content in a single contained space to focus attention, conserve space, and streamline the display of multimedia content.
Usage
Carousels should have controls that allow users to both swipe and click through the content and often are configured to play automatically on page load. The carousel should also allow the inclusion of a caption for each slide. Note that carousels can be difficult to make accessible while also optimizing for a good mobile experience, especially when they include more than three or four slides.
Example
<div class="slideshow-container">
<div class="mySlides fade">
<img alt="" data-entity-type="" data-entity-uuid="" src="https://via.placeholder.com/1900x650" style="width:100%" />
<span>Slide 1</span>
</div>
<div class="mySlides fade">
<img alt="" data-entity-type="" data-entity-uuid="" src="https://via.placeholder.com/1900x650" style="width:100%" />
<span>Slide 2</span>
</div>
<div class="mySlides fade">
<img alt="" data-entity-type="" data-entity-uuid="" src="https://via.placeholder.com/1800x650" style="width:100%" />
<span>Slide 3</span>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center"> </div>
<script>
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
</script>