Using Parallax with Image Slideshow

Question

I'm trying to create a parallax effect with a simple slideshow that I made.

First, I have one with just the basic parallax.js implementation: fiddle: https://jsfiddle.net/jzhang172/bcdkvqtq/1/

.parallax-window {
    min-height: 400px;
position:relative;

}

.ok{
font-size:50px;
background:gray;
color:blue;
height:300px;
width:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>

<div class="parallax-window" data-parallax="scroll" data-image-src="http://vignette4.wikia.nocookie.net/pokemon/images/5/5f/025Pikachu_OS_anime_11.png/revision/latest?cb=20150717063951g">

  

</div>
<div class="ok">Hey there</div>

This works, however, now I want this effect on image slideshow, with or without parallax.js is fine but I would like the same parallax effect:

I'm not sure how to apply it to the images:

fiddle: https://jsfiddle.net/jzhang172/k4fygvhg/1/

$(document).ready(function() {


var slides = $('.featured-wrapper img');

var slideAtm = slides.length;
var currentPos = 0;
slides.hide();
 function roll(){
    var slide = slides.eq(currentPos);
    slide.fadeIn(2000);
        setTimeout(up,1500);
    }


 
 roll();
 
 function up(){
 currentPos +=1;
 slides.fadeOut(1500);
 setTimeout(roll, 500);
    if(currentPos > slideAtm -1){
      currentPos = 0;
    }
 }


});

.featured-wrapper img{
  max-width:200%;
  max-height:200%;
  min-width:100vw;
}
.featured-wrapper{
  height:500px;
  width:100%;
  overflow:hidden;
}
.things{
  font-size:50px;
  height:500px;
  width:100%;
  background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>
  <div class="featured-wrapper" data-parallax="scroll">
      <img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png" alt="">
      <img src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png" alt="">
      <img src="https://assets.pokemon.com/static2/_ui/img/account/sign-up.png" alt="">
      <img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
       <img src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" alt="">
      </div>
      <div class="things">I'm the stuff underneath</div>

Answer 1

My proposal is to preload the images and, using the complete events of fadeIn / fadeOut instead of setTimeOut.

I hope this could help you.

var imagesArray = ["http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png",
                   "http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png",
                   "https://assets.pokemon.com/static2/_ui/img/account/sign-up.png",
                   "http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png",
                   "http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png"];

function preloadImg(pictureUrls, callback) {
  var i, j, loaded = 0;
  var imagesArray = [];

  for (i = 0, j = pictureUrls.length; i < j; i++) {
    imagesArray.push(new Image());
  }
  for (i = 0, j = pictureUrls.length; i < j; i++) {
    (function (img, src) {
      img.onload = function () {
        if (++loaded == pictureUrls.length && callback) {
          callback(imagesArray);
        }
      };
      img.src = src;
    }(imagesArray[i], pictureUrls[i]));
  }
};


function roll(imagesArray, currentPos, max){
  if (max < 0) {
    return;
  }
  var slide = $('.parallax-mirror').find('img').attr('src', imagesArray[currentPos].src);
  slide.fadeIn(2000, function() {
    slide.fadeOut(1500, function() {
      currentPos++;
      if(currentPos >= imagesArray.length){
        currentPos = 0;
        max--;
      }
      roll(imagesArray, currentPos, max);
    });
  });
}

$(function () {
  preloadImg(imagesArray, function (imagesArray) {
    roll(imagesArray, 0, 3);
  });
});

.parallax-window {
  min-height: 400px;
  position:relative;

}
.ok {
  font-size:50px;
  background:gray;
  color:blue;
  height:500px;
  width:100%;
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>

<div class="parallax-window" data-parallax="scroll"
     data-image-src="http://assets.pokemon.com/assets/cms2/img/pokedex/full//007.png">
</div>

<div class="ok">I'm the stuff underneath</div>