Image Carousel

An image carousel is a container or slideshow of images or information that users can select by clicking a button that directs them forward or backward in the slideshow. An image carousel makes a website more interactive by enhancing the user experience.

Examples

1 / 3

Caption One

2 / 3

Caption Two

3 / 3

Caption Three

❮ ❯

                     
        <div class="slideshow">
  <div class="slides fade">
    <div class="slide-number">1 / 3</div>
    <img src="https://picsum.photos/id/1015/500/200" style="width: 100%" />
    <div class="slide-text">Caption One</div>
  </div>

  <div class="slides fade">
    <div class="slide-number">2 / 3</div>
    <img src="https://picsum.photos/id/1016/500/200" style="width: 100%" />
    <div class="slide-text">Caption Two</div>
  </div>

  <div class="slides fade">
    <div class="slide-number">3 / 3</div>
    <img src="https://picsum.photos/id/1039/500/200" style="width: 100%" />
    <div class="slide-text">Caption Three</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</div>

<div style="text-align: center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>
                     
                  

                    
var slideIndex = 1;
    slides(slideIndex);
                  
    // Next/previous controls
    function plusSlides(n) {
  slides((slideIndex += n));
    }
                  
   // Thumbnail image controls
 function currentSlide(n) {
slides((slideIndex = n));
}
                  
function slides(n) {
var i;
var slides = document.getElementsByClassName("slides");
var 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";
    }