0

I really can't get this to work.. I want the images to fade in a bit. Found a lot suggesting to do this by opacity transition.. but I just can't figure it out. Can you help me please?

I found out how to address the opacity in the javascript, but the css won't affect it. Read somewhere to delete display:none and block but then the images are gone. I'm sure I miss something fundamental. But after about 6 hours now I thought maybe one of you pros can help me. Unfortunately I am not.

Thanks in advance!

David

var slideIndex = 1;
showDivs(slideIndex);

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

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

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var 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";
}

document.getElementById("slider-wrapper").style.opacity = 1;
#slider-wrapper {
 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>
Durga
  • 15,263
  • 2
  • 28
  • 52
David Fenk
  • 63
  • 7

2 Answers2

0

Set the div to 0 opacity, set the transition. Then add a class to that div that changes the opacity when you want it to be visible.

function showDiv() {
    var div = document.getElementById("slider-wrapper");
    div.className += " visible";
}

css:

#slider-wrapper {
    opacity: 0;
    transition: opacity 2s;
}

#slider-wrapper.visible {
    opacity: 1;
}

In your case you want to apply transitions to each of the images.

set the opacity for the image elements

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

img.mySlides.visible {
    opacity: 1;
}

Your function that shows an image needs to remove the visible class from the current visible element and add it to the one you want to display.

Anthony
  • 1,667
  • 2
  • 17
  • 28
  • Great! Almost there. Probleme now is that it just works once. When I go to the next image there is no more fade. How to repeat it? – David Fenk Aug 07 '17 at 14:33
  • If you want to transition opacity on the images then you should set the opacity, transition, and set the visible class on the image elements instead the of the #slider-wrapper div. – Anthony Aug 07 '17 at 14:37
  • sounds logic.. but can't get it done.. any hints? Thank you so very much so far – David Fenk Aug 07 '17 at 15:05
  • I added some more info about styling. Your function needs to remove the visible class from the currently visible element and add it to the one you want to fade in. Hopefully that helps. – Anthony Aug 07 '17 at 15:12
  • Damn. Can't get it done with my level of skill. Guess I have to learn more Java fundamentals.. But thank you so much for your time anyway – David Fenk Aug 07 '17 at 15:41
  • @DavidFenk You're welcome. Just to clarify this is Javascript, not Java. They are different languages. For further reading on setting an element's classes with Javascript see if this question helps you. https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript You essentially just need to add the class to the image you want to show, and remove it from the others. – Anthony Aug 07 '17 at 17:09
0

You just have to declare first the opacity: 0; for your slider-wrapper in your style sheet:

#slider-wrapper {
    opacity: 0;
    transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -moz-transition: opacity 2s;
    -ms-transition: opacity 2s;
    -o-transition: opacity 2s;
}

The reason it does not work is because the script does not find the property opacity

Abiel Muren
  • 365
  • 1
  • 18