How can I add opacity transition to this slideshow script? Part 2

Question

Sry to ask again. I have made some progress, but unfortunately I still can't get it done, and I'm getting a bit desperate.

The question I asked yesterday can be found here: How can I add opacity transition to this script?

As Anthony suggested I'm trying to give the visible img of "mySlides" an extra class called .visible and remove it when the next img is called.

So after some research I managed to give it the new class with: x[slideIndex-1].classList.add("visible")

but the transition still won't work.

What am I doing wrong?

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i,
    x = document.getElementsByClassName("mySlides"),
    dots = document.getElementsByClassName("demo");

  if (n > x.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = x.length
  }

  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
    x[i].classList.remove("visible");
  }

  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-white", "");
  }

  x[slideIndex - 1].style.display = "block";
  x[slideIndex - 1].classList.add("visible")
  dots[slideIndex - 1].className += " w3-white";
}

img.mySlides {
  opacity: 0;
  transition: opacity 2s;
}

img.mySlides.visible {
  opacity: 1;
  transition: opacity 2s
}

<div class="w3-content w3-display-container">
  <div id="slider-wrapper">
    <img id="zupfinstrumente" class="centerscreen mySlides slidepos" src="img1.jpg" alt="xy">
    <img id="ueber-mich" class="centerscreen mySlides slidepos" src="img2.jpg" alt="xy">
    <img id="streichinstrumente" class="centerscreen mySlides slidepos" src="img3.jpg" alt="xy"></div>
  <div class="w3-center w3-container w3-section w3-large w3-text-white centerscreen badgepos">
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
  </div>
  <container id="buttons" class="centerscreen">
    <div id="navarrow-left" class="w3-left w3-hover-text-black btn" onclick="plusDivs(-1)">&#10094;</div>
    <div id="navarrow-right" class="w3-right w3-hover-text-black btn" onclick="plusDivs(1)">&#10095;</div>
  </container>
</div>

Answer 1

You can create your custumized css annimation then use this last on your img wo when the image shown the annimation will trigger ,

the annimation css code :

/* 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}
}

See below snippet :

var slideIndex = 1;
 showDivs(slideIndex);

function plusDivs(n) {
 showDivs(slideIndex += n);
}

function currentDiv(n) {
 showDivs(slideIndex = n);
}

function showDivs(n) {
 var i,
  x = document.getElementsByClassName("mySlides"),
  dots = document.getElementsByClassName("demo");
 
 if (n > x.length) {slideIndex = 1
 } 
 
 if (n < 1) {slideIndex = x.length
 }
 
 for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
 }
 
 for (i = 0; i < dots.length; i++) {
   dots[i].className = dots[i].className.replace(" w3-white", "");
 }
  
 x[slideIndex-1].style.display = "block";
 dots[slideIndex-1].className += " w3-white";
}

.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}


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

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

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

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-content w3-display-container">
    <div id="slider-wrapper">
        <img id="zupfinstrumente" class="centerscreen mySlides slidepos fade" src="https://www.w3schools.com/w3css/img_mountains_wide.jpg" alt="xy">
        <img id="ueber-mich" class="centerscreen mySlides slidepos fade" src="https://www.w3schools.com/w3css/img_fjords_wide.jpg" alt="xy">
        <img id="streichinstrumente" class="centerscreen mySlides slidepos fade" src="https://www.w3schools.com/w3css/img_nature_wide.jpg" alt="xy"></div>
    <div class="w3-center w3-container w3-section w3-large w3-text-white centerscreen badgepos">
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
        <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
    </div>
    <container id="buttons" class="centerscreen">
        <div id="navarrow-left" class="w3-left w3-hover-text-black btn" onclick="plusDivs(-1)">&#10094;</div>
        <div id="navarrow-right" class="w3-right w3-hover-text-black btn" onclick="plusDivs(1)">&#10095;</div>
    </container>
</div>