I have a simple carousel using JavaScript, html and CSS with three images. When 'prev' and 'next' buttons are clicked manually, the carousel will cycle continually, so when the visitor reaches the third image and clicks/taps 'next' it goes back to image 1.

How can I make this cycling happen automatically on page load?

Here is the code on codepen.io

And this is the same code below. I have substituted the images with coloured divs:

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex  = n);
}
// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
    let i;
    if (document.querySelector(".carousel")) {
        let slideshowPage = document.querySelector(".carousel");
        if (slideshowPage.classList.contains("carousel")) {
            let slides = slideshowPage.querySelectorAll(".mySlides");
            if (n > slides.length) {
            slideIndex = 1
            };
            if (n < 1) {
            slideIndex = slides.length
            };
        for (i = 0; i < slides.length; i  ) {
            slides[i].style.display = "none";
        };
        slides[slideIndex-1].style.display = "block";
        }
    }
}

.carousel {
  min-height: 200px;
  background-color: #e6e6e6;
  position: relative;
}
.mySlides {
  display: none;
  height: /*auto;*/ 200px; /* size for this demo only */
  width:  /*auto;*/ 350px; /* size for this demo only */
  padding: 1rem 3.5rem;
  background-color: #0c991f;
  margin: 0 auto;
}
.mySlides.two {
  background-color: #e08a12;
}
.mySlides.three {
  background-color: #135dd6;
}

.slideshow-container {
  position: relative;
  margin: 0 auto;
}
.carousel .prev,
.carousel .next{
  background-color: rgba(0,0,0,0.2);
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #000000;
  font-weight: bold;
  font-size: 1.25rem;
  transition: 0.6s ease;
  border: none;
  user-select: none;
  left: 0;
}
.carousel .next{
  left: unset;
  right: 0;
  border-radius: 3px 0 0 3px;
}
.carousel .prev:hover,  
.carousel .prev:focus,
.carousel .next:hover,
.carousel .next:focus{
  background-color: rgba(0,0,0,0.4);
  color: #fff;
}
.carousel .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade,
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

<div class="carousel">
  <div class="slideshow-container">
    <div class="mySlides one">This div represents image 1</div>
     <div class="mySlides two">This div represents image 2</div>
      <div class="mySlides three">This div represents image 3</div>
   </div>
  <div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button">❮</div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button">❯</div>
 </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Add setInterval to the script like,

setInterval(function() {
  plusSlides(1)
}, 2000);

You can change the interval as per your need.

Modified Snippet:

let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex  = n);
}
// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
    let i;
    if (document.querySelector(".carousel")) {
        let slideshowPage = document.querySelector(".carousel");
        if (slideshowPage.classList.contains("carousel")) {
            let slides = slideshowPage.querySelectorAll(".mySlides");
            if (n > slides.length) {
            slideIndex = 1
            };
            if (n < 1) {
            slideIndex = slides.length
            };
        for (i = 0; i < slides.length; i  ) {
            slides[i].style.display = "none";
        };
        slides[slideIndex-1].style.display = "block";
        }
    }
}


setInterval(function() {
  plusSlides(1)
}, 2000);

.carousel {
  min-height: 200px;
  background-color: #e6e6e6;
  position: relative;
}
.mySlides {
  display: none;
  height: /*auto;*/ 200px; /* size for this demo only */
  width:  /*auto;*/ 350px; /* size for this demo only */
  padding: 1rem 3.5rem;
  background-color: #0c991f;
  margin: 0 auto;
}
.mySlides.two {
  background-color: #e08a12;
}
.mySlides.three {
  background-color: #135dd6;
}

.slideshow-container {
  position: relative;
  margin: 0 auto;
}
.carousel .prev,
.carousel .next{
  background-color: rgba(0,0,0,0.2);
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: #000000;
  font-weight: bold;
  font-size: 1.25rem;
  transition: 0.6s ease;
  border: none;
  user-select: none;
  left: 0;
}
.carousel .next{
  left: unset;
  right: 0;
  border-radius: 3px 0 0 3px;
}
.carousel .prev:hover,  
.carousel .prev:focus,
.carousel .next:hover,
.carousel .next:focus{
  background-color: rgba(0,0,0,0.4);
  color: #fff;
}
.carousel .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade,
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

<div class="carousel">
  <div class="slideshow-container">
    <div class="mySlides one">This div represents image 1</div>
     <div class="mySlides two">This div represents image 2</div>
      <div class="mySlides three">This div represents image 3</div>
   </div>
  <div class="direction prev" tabindex="0" onclick="plusSlides(-1)" role="button">❮</div>
<div class="direction next" tabindex="0" onclick="plusSlides(1)" role="button">❯</div>
 </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>