Slideshow Javascript Fade Function Using a counter

Question

I am making a simple slideshow in js and want to make a fade function that can be implemented easily with this code that i'm using right now.

var pics = [pics]
var btn = document.querySelector("button");
var img = document.querySelector("img");
var counter = 1;
btn.addEventListener("click", function(){
if(counter === 5)
{
counter = 0;
}
img.src = pics[counter]
counter = counter + 1; });

This does not look like Java ... – Seelenvirtuose Mar 03 '20 at 13:39 — Seelenvirtuose, Mar 03 '20 at 13:39

mplungjan · Answer 1 · 2020-03-03T13:50:40.727

Something like this

var pics = ["https://picsum.photos/id/1/200/300", "https://picsum.photos/id/2/200/300", "https://picsum.photos/id/3/200/300", "https://picsum.photos/id/4/200/300", "https://picsum.photos/id/5/200/300"];
var btn = document.querySelector("button");
var img = document.querySelector("img");
var counter = 1;
btn.addEventListener("click", function() {
  if (counter >= pics.length) {
    counter = 0;
  }
  img.classList.add('transitioning-src')
  img.src = pics[counter]
  setTimeout(() => {
    img.classList.remove('transitioning-src');
  }, 400); // Ensure timeout matches transition time, remove transition class  
  counter++;
});

img {
  transition: opacity 0.4s ease-in;
  opacity: 1;
}

.transitioning-src {
  transition: opacity 0.4s ease-out;
  opacity: 0;
}

<img src="https://picsum.photos/id/1/200/300" />
<button type="button">Next</button>

Slideshow Javascript Fade Function Using a counter

1 Answers1