Javascript and CSS for Automatic Slideshow

Question

I would like to know how to make this slider to automatic slideshow. This slider contains clickable bullets at the bottom and pre/next buttons on the slides but doesn't animate itself.

Would anyone please let me know how to make it automatic slideshow?

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

Thank you in advance.

Answer 1

i have do some changes in the code , and create as a auto slider with custom card

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("slide-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(){ showSlides(++slideIndex); }, 4000);
}

  /* Slideshow container */
.slide-slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  height: 60vh;
}

/* Next & previous buttons */
.slide-prev, .slide-next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: grey;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.slider-product{
  max-width: 320px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #dddddd;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 5px;
}
.slider-product:hover{
  border: 1px solid #006ba3;
}
/* Position the "next button" to the right */
.slide-next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.slide-prev:hover, .slide-next:hover {
  color: block;
}

/* Caption text */
.slide-text {
  color: #000000;
  padding: 24px 12px;
  position: absolute;
  /* bottom: 8px; */
  top:0;
  height: max-content;
  width: 100%;
  text-align: center;
  background: #ffffff;

  
}

/* Number text (1/3 etc) */
.slide-numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.slide-dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .slide-dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .5} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 767px) {
  .slide-prev, .slide-next,.slide-text {font-size: 11px}

}

<div class="slide-slideshow-container">

<div class="slide-mySlides fade">
  <div class="slide-numbertext">1 / 3</div>
  <div class="slide-text">
    <a href="#">
      <div class="slider-product">
        <img src="xyz.jpg" style="width:100%" />
        <h4 style="text-align: left; margin: 0.5em 0;">card no 1</h4>
        <p style="text-align: left; color: #1e1d1e;">Qui placeat nesciunt sit omnis voluptate et voluptatem unde et magni possimus eos autem tempore a pariatur autem sed labore autem!</p>
      </div>
    </a>
  </div>
</div>
<div class="slide-mySlides fade">
  <div class="slide-numbertext">1 / 3</div>
  <div class="slide-text">
    <a href="#">
      <div class="slider-product">
        <img src="xyz.jpg" style="width:100%" />
        <h4 style="text-align: left; margin: 0.5em 0;">card no 2</h4>
        <p style="text-align: left; color: #1e1d1e;">Qui placeat nesciunt sit omnis voluptate et voluptatem unde et magni possimus eos autem tempore a pariatur autem sed labore autem!</p>
      </div>
    </a>
  </div>
</div>
<div class="slide-mySlides fade">
  <div class="slide-numbertext">1 / 3</div>
  <div class="slide-text">
    <a href="#">
      <div class="slider-product">
        <img src="xyz.jpg" style="width:100%" />
        <h4 style="text-align: left; margin: 0.5em 0;">card no 3</h4>
        <p style="text-align: left; color: #1e1d1e;">Qui placeat nesciunt sit omnis voluptate et voluptatem unde et magni possimus eos autem tempore a pariatur autem sed labore autem!</p>
      </div>
    </a>
  </div>
</div>
<div class="slide-mySlides fade">
  <div class="slide-numbertext">1 / 3</div>
  <div class="slide-text">
    <a href="#">
      <div class="slider-product">
        <img src="xyz.jpg" style="width:100%" />
        <h4 style="text-align: left; margin: 0.5em 0;">card no 4</h4>
        <p style="text-align: left; color: #1e1d1e;">Qui placeat nesciunt sit omnis voluptate et voluptatem unde et magni possimus eos autem tempore a pariatur autem sed labore autem!</p>
      </div>
    </a>
  </div>
</div>

<div class="slide-mySlides fade">
  <div class="slide-numbertext">1 / 3</div>
  <div class="slide-text">
    <a href="#">
      <div class="slider-product">
        <img src="xyz.jpg" style="width:100%" />
        <h4 style="text-align: left; margin: 0.5em 0;">card no 5</h4>
        <p style="text-align: left; color: #1e1d1e;">Qui placeat nesciunt sit omnis voluptate et voluptatem unde et magni possimus eos autem tempore a pariatur autem sed labore autem!</p>
      </div>
    </a>
  </div>
</div>

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

</div>

Answer 2

What I would recommend is making use of a setInterval() function such as the following:

setInterval(function() {
  slideIndex++;
  showSlides(slideIndex);
}, 3000);

The above function increases the current index, then triggers the showSlides() function, passing the index as a parameter. The 3000 denotes the speed at which the automation should occur, with the time specified in millseconds. Note that setInterval() should be used rather than setTimeout(), because setInteravl() fires more than once.

This gives the following result:

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  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";
}

setInterval(function() {
  slideIndex++;
  showSlides(slideIndex);
}, 3000);

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}

.mySlides {
  display: none
}


/* Slideshow container */

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}


/* Next & previous buttons */

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}


/* Caption text */

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}


/* Number text (1/3 etc) */

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}


/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active,
.dot:hover {
  background-color: #717171;
}


/* Fading animation */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }
  to {
    opacity: 1
  }
}


/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

  <div class="slideshow-container">
  
    <div class="mySlides fade">
      <div class="numbertext">1 / 3</div>
      <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
      <div class="text">Caption Text</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">2 / 3</div>
      <img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" style="width:100%">
      <div class="text">Caption Two</div>
    </div>

    <div class="mySlides fade">
      <div class="numbertext">3 / 3</div>
      <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
      <div class="text">Caption Three</div>
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

  </div>
  <br>

  <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>

</body>

</html>

Hope this helps! :)

Answer 3

You could do what the click on the next button does: call plusSlider with a parameter 1.

To do that every 2000ms your can use setInterval. On that w3schools tryit page put following code before the closing </script> then run it:

setInterval(plusSlides,2000,1);

Answer 4

Use setInterval() function to make the slideshow automatically for the certain time interval. Add the setInterval() function in your example reference link after the below line:

var slideIndex = 1; showSlides(slideIndex);

setInterval(function(){ showSlides(++slideIndex); }, 1000);

The slide will be changed every 1000 milli seconds. If you need you can adjust the time as per your need.