Sorry to bring this up again, but I have made some progress since yesterday. However, I am still unable to complete it, and I'm starting to feel a bit desperate.
If you recall, the question I posted yesterday can be viewed here: How can I add opacity transition to this script?
Following Anthony's advice, I am attempting to apply an additional class called .visible to the visible image of "mySlides" and remove it when the next image is displayed.
After some investigation, I was able to assign the new class with the following line of code: x[slideIndex-1].classList.add("visible")
Unfortunately, the transition effect still does not seem to work as intended.
Can someone please help me identify what mistake I might be making in this case?
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)">❮</div>
<div id="navarrow-right" class="w3-right w3-hover-text-black btn" onclick="plusDivs(1)">❯</div>
</container>
</div>