I've set up a simple slideshow with a parallax effect where the queued slide overlaps the current slide. All works great until the slideshow cycle completes where the last slide misbehaves and does not reset its position underneath the current slide like the rest do. I cannot determine why it behaves like this.

[JSFiddle](https://jsfiddle.net/nolder/zm1Lfa70/1/)

```js
var slides = [];

// Append images to the slides array
$('.slide').each(function() {
  "use strict";
  slides.push($(this));
});

function slideshow() {

  "use strict";

  var $current = slides[0],
    $next = slides[1];

  setInterval(function() {

    // Slide animation
    $current.css('transform', 'translate3d(-30%, 0, 0)');
    $next.css('transform', 'translate3d(0, 0, 0)');

    // Reorder slides
    slides.push($current);
    slides.shift();

    // Reestablish slide variables
    $current = slides[0];
    $next = slides[1];

    // Reset position of slide
    setTimeout(function() {
      slides[3].css('transform', 'translate3d(100%, 0, 0)');
      setTimeout(function() {
        slides[3].css('z-index', 1);
      }, 1000);
      $current.css('z-index', 0);
    }, 1000); // END: setTimeout()

  }, 4000); // END: setInterval()

} // END: slideshow()

slideshow();
```

```css
@charset "UTF-8";

/* CSS Document */

body {
  margin: 0;
  padding: 0;
}

#main-container {
  height: 60vh;
  width: 100vw;
  overflow: hidden;
}

#slide-container {
  width: 200vw;
  height: 100%;
  position: relative;
}

.slide {
  background-position: center;
  background-size: cover;
  width: 50%;
  height: 100%;
  position: absolute;
  transform: translate3d(100%, 0, 0);
  z-index: 1;
  transition: 1s cubic-bezier(.48, .14, .31, .97);
  color: white;
  line-height: 60vh;
  text-align: center;
  font-size: 70px;
}

#slide-1 {
  background-image: url(https://media.mnn.com/assets/images/2015/03/forest-path-germany.jpg.653x0_q80_crop-smart.jpg);
  transform: translate3d(0, 0, 0);
  z-index: 0;
}

#slide-2 {
  background-image: url(https://media.treehugger.com/assets/images/2016/03/woodland_trail.jpg.662x0_q70_crop-scale.jpg);
}

#slide-3 {
  background-image: url(http://sim02.in.com/4fc598f2c9f2c0cdc5e0decc188d8d10_ft_xl.jpg);
}

#slide-4 {
  background-image: url(https://media-cdn.tripadvisor.com/media/photo-s/05/fc/88/f9/waterloop-trail.jpg);
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
  <div id="slide-container">
    <div class="slide" id="slide-1">Slide 1</div>
    <div class="slide" id="slide-2">Slide 2</div>
    <div class="slide" id="slide-3">Slide 3</div>
    <div class="slide" id="slide-4">Slide 4</div>
  </div>
</div>
```