<div class="parallax-slider-container">
  <div id="parallax-slider">
    <div class="parallax-slider-inner">
      <figure>
        <div id="parallax-image-one" class="slider-image" data-type="background" data-speed="3"></div>
        <div id="parallax-image-two" class="slider-image" data-type="background" data-speed="3"></div>
        <div id="parallax-image-three" class="slider-image" data-type="background" data-speed="3"></div>
        <div id="parallax-image-four" class="slider-image" data-type="background" data-speed="3"></div>
        <div id="parallax-image-five" class="slider-image" data-type="background" data-speed="3"></div>
      </figure>
    </div><!-- end of parallax-slider-inner -->
  </div><!-- end of parallax-slider -->
</div><!-- end of parallax-slider-container -->

@keyframes slidy {
  0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
}
body { margin: 0; } 

div#parallax-slider { overflow: hidden; }
div#parallax-slider figure .slider-image { width: 20%; float: left; }
div#parallax-slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}
#parallax-slider {
  margin: 0; 
  margin-bottom: 500px;
  height: 450px;
}
.slider-image {
  display: inline-block;
}
#parallax-image-one,
#parallax-image-two,
#parallax-image-three,
#parallax-image-four,
#parallax-image-five {
  background-repeat: no-repeat;
  height: 450px;
  width: 100vw;
}

#parallax-image-one {
  background-image: url('https://unsplash.it/1500/600');
}
#parallax-image-two {
  background-image: url('https://unsplash.it/1500/600');
}
#parallax-image-three {
  background-image: url('https://unsplash.it/1500/600');
}
#parallax-image-four {
  background-image: url('https://unsplash.it/1500/600');
}
#parallax-image-five {
  background-image: url('https://unsplash.it/1500/600');
}

function parallax() {
  var $parallaxImage = document.getElementById("parallax-image");

  var yPos = window.pageYOffset / $parallaxImage.dataset.speed;
  yPos = -yPos;

  var coords = '0% '+ yPos + 'px';

  $parallaxImage.style.backgroundPosition = coords;
}

window.addEventListener("scroll", function(){
  parallax();	
});
// one
function parallaxOne() {
  var $parallaxImageOne = document.getElementById("parallax-image-one");


  var yPos = window.pageYOffset / $parallaxImageOne.dataset.speed;
  yPos = -yPos;

  var coords = '0% '+ yPos + 'px';
  $parallaxImageOne.style.backgroundPosition = coords;
}

//two
function parallaxTwo() {
  var $parallaxImageTwo = document.getElementById("parallax-image-two");


  var yPos = window.pageYOffset / $parallaxImageTwo.dataset.speed;
  yPos = -yPos;

  var coords = '0% '+ yPos + 'px';
  $parallaxImageTwo.style.backgroundPosition = coords;
}

//three
function parallaxThree() {
  var $parallaxImageThree = document.getElementById("parallax-image-three");

  var yPos = window.pageYOffset / $parallaxImageThree.dataset.speed;
  yPos = -yPos;

  var coords = '0% '+ yPos + 'px';	
  $parallaxImageThree.style.backgroundPosition = coords;
}

//four
function parallaxFour() {
  var $parallaxImageFour = document.getElementById("parallax-image-four");

  var yPos = window.pageYOffset / $parallaxImageFour.dataset.speed;
  yPos = -yPos;

  var coords = '0% '+ yPos + 'px';
  $parallaxImageFour.style.backgroundPosition = coords;
}

//five
function parallaxFive() {
  var $parallaxImageFive = document.getElementById("parallax-image-five");

  var yPos = window.pageYOffset / $parallaxImageFive.dataset.speed;
  yPos = -yPos;

  var coords = '0% '+ yPos + 'px';
  $parallaxImageFive.style.backgroundPosition = coords;
}

window.addEventListener("scroll", function(){
  parallaxOne();
  parallaxTwo();
  parallaxThree();
  parallaxFour();
  parallaxFive();	
});