Parallax effect in DIV

Question

I’m having a hard time adding a Parallax (or identical) animation to my slideshow when I’m down scrolling on my page.

I could do it, but only with background images using the property background-attachment: fixed;.

Anyone have any suggestions ? Below I let my Slideshow code ease.

HTML:

<div class="slideShow-container">
    <div class="slide">
        <img src="images/background14.jpg" alt="background1" class="slideImg">
    </div>
    <div class="slide">
        <img src="images/background18.jpg" alt="background1" class="slideImg">
    </div>
    <div class="slide">
        <img src="images/background19.jpg" alt="background1" class="slideImg">
    </div>
</div>
<div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>

JS:

    var i;

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

    var dots = document.getElementsByClassName("dot");

    for (i = 0; i < slides.length; i++) {

       slides[i].style.display = "none";  

    }

    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    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, 4000) ;
}