Improve Slideshow Script - Auto Change

[almo136]

I have this simple script which displays a list of images as a slideshow. I would like to improve it so that I can set it to auto scroll through the images (for example every 5 seconds). When doing this it would also need to highlight the relevant dot and stop cycling if the user manually clicks the navigation buttons.

To make it more complicated this slideshow appears on the site a few times but I would only like the auto scroll to happen on one of them. So maybe if the container has a specific class?

//Slideshow
(function() {

 init(); //on page load - show first slide, hide the rest

 function init() {

 parents = document.getElementsByClassName('slideshow-container');

 for (j = 0; j < parents.length; j++) {
  var slides = parents[j].getElementsByClassName("mySlides");
  var dots = parents[j].getElementsByClassName("dot");
  slides[0].classList.add('active-slide');
  dots[0].classList.add('active');
 }
 }

 dots = document.getElementsByClassName('dot'); //dots functionality

 for (i = 0; i < dots.length; i++) {

 dots[i].onclick = function() {

  slides = this.parentNode.parentNode.getElementsByClassName("mySlides");

  for (j = 0; j < this.parentNode.children.length; j++) {
  this.parentNode.children[j].classList.remove('active');
  slides[j].classList.remove('active-slide');
  if (this.parentNode.children[j] == this) {
   index = j;
  }
  }
  this.classList.add('active');
  slides[index].classList.add('active-slide');

 }
 }
//prev/next functionality
 links = document.querySelectorAll('.slideshow-container a');

 for (i = 0; i < links.length; i++) {
 links[i].onclick = function() {
  current = this.parentNode;

  var slides = current.getElementsByClassName("mySlides");
  var dots = current.getElementsByClassName("dot");
  curr_slide = current.getElementsByClassName('active-slide')[0];
  curr_dot = current.getElementsByClassName('active')[0];
  curr_slide.classList.remove('active-slide');
  curr_dot.classList.remove('active');
  if (this.className == 'next') {

  if (curr_slide.nextElementSibling.classList.contains('mySlides')) {
   curr_slide.nextElementSibling.classList.add('active-slide');
   curr_dot.nextElementSibling.classList.add('active');
  } else {
   slides[0].classList.add('active-slide');
   dots[0].classList.add('active');
  }
  }

  if (this.className == 'prev') {

  if (curr_slide.previousElementSibling) {
   curr_slide.previousElementSibling.classList.add('active-slide');
   curr_dot.previousElementSibling.classList.add('active');
  } else {
   slides[slides.length - 1].classList.add('active-slide');
   dots[slides.length - 1].classList.add('active');
  }
  }
 }
 }
})();

<div class="slideshow-container">
 <div class="mySlides fade active-slide">
  <img src="image1.jpg">
 </div>


<div class="mySlides fade">
  <img src="image2.jpg">
 </div>

<div class="mySlides fade">
  <img src="image3.jpg">
 </div>

<div class="mySlides fade">
  <img src="image4.jpg">
 </div>

 <a class="prev">&#10094;</a>
 <a class="next">&#10095;</a>    

<div class="dot-container">
 <span class="dot active"></span> 
 <span class="dot"></span> 
 <span class="dot"></span> 
 <span class="dot"></span>    
 </div>
</div>

[NickMNS]

I put together a quick demo that should get you started on the right track. I defined a function by name to go to the next slide. I then use setInterval() to continuously go to the next slide. I then added an event listener to the next button (link), it calls the next slide function once and clears the interval so that it stops cycling through the images.

See the demo and code here:
[jsfiddle.net...]

I didn't write a function for the previous button. Basically the same as next but in reverse. I didn't do anything for dots, but it is the same as the slides, to highlight them just add the styling to the css classes as you were doing it.

One important note:
I added a div to your slide show container, to house the slides, so it is now container -> slides div, prev link, next link, dots div.

And regarding your last question, if you don't want to auto play don't add the setInterval.

I hope this helps.