Effect parallax on DIV

I'm having trouble adding a parallax (or identical) animation to my slide show when I scroll down my page.

I was able to do this, but only with background images using the background-attachment: fixed; property.

Does anyone have any suggestions? Below I'll let my SlideShow code become easier.

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) ;
}