CODEWITHSUNDEEP
javascripthtmlcsstimer
Klye
Klye

Reputation: 104

JS Creating a Timer To Hide Image Slideshow

I'm trying to create a image slideshow that plays through all of the images and on the last one fade away and no longer show any images for another 10 seconds, then after 10 seconds it starts all over again. Currently I have it stopping on the last image but it doesn't do anything after that and just gets stuck. Not really all that sure on how to accomplish something like this so any and all help is really appreciated! Below is the JS if any other script is needed please let me know!

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
   // var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex >= slides){
        setTimeout(function(){ slideIndex = 1; }, 10000);
    }
    /*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";
    setTimeout(showSlides, 10000); // Change image every 10 seconds
}

UPDATE: setInterval

var slideIndex = 0;
showSlides();

var myPause = setInterval(function(){ showSlides() }, 10000);

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
        myPause;
        slideIndex = 1;
    }
    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 10000); // Change image every 10 seconds
    clearInterval(myPause);
}

Upvotes: 2

Views: 567

Answers (2)

greengiraffe
greengiraffe

Reputation: 89

As BillyNate already said, setInterval makes it work the way you want. To repeat the slideshow with a 10 second break inbetween, you need to hide the last slide and then repeat the slideshow after 10 seconds by setting a timeout.

The animation can be applied where the last slide gets set to display: none.

var slides = document.getElementsByClassName("mySlides");

function switchSlides() {
  var slideCount = slides.length;
  var i = 0;
  
  // Set first slide visible
  slides[i].style.display = "block";
  
  // Switch slide every 10 seconds
  var switchInterval = setInterval(function() {
    i++;
    if (i < slideCount) {
      slides[i-1].style.display = "none";
      slides[i].style.display = "block";
    } else {
      clearInterval(switchInterval);

      // Hide last slide (--> fade out image)
      slides[i-1].style.display = "none";
      
      // Wait 10 seconds, then repeat switchSlides
      setTimeout(switchSlides, 10000);
    }
  }, 10000);
}

switchSlides();
.mySlides {
  display: none;
}
<img class="mySlides" src="http://unsplash.it/200?image=10">
<img class="mySlides" src="http://unsplash.it/200?image=20">
<img class="mySlides" src="http://unsplash.it/200?image=30">

Upvotes: 0

BillyNate
BillyNate

Reputation: 908

You're really close. Just using setInterval should be enough.

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    for (i = 1; i < slides.length; i++) {
       slides[i].style.display = "none";
    }
    
    setInterval(function() {
      slides[slideIndex].style.display = "none";
    	slideIndex ++;
      if(slideIndex >= slides.length) {
          slideIndex = 0;
      }
      else
      {
        slides[slideIndex].style.display = "block";
      }
    }, 10000);
}
img { display: block; width: 100% }
<img class="mySlides" src="http://ununsplash.imgix.net/photo-1419064642531-e575728395f2?q=75" />
<img class="mySlides" src="http://ununsplash.imgix.net/photo-1417436026361-a033044d901f?q=75" />
<img class="mySlides" src="http://ununsplash.imgix.net/photo-1414502622871-b90b0bec7b1f?q=75" />

Upvotes: 3

Related Questions