Alternate Slide/Un-slide of Images

Question

Could someone help me with this issue. I want to make each image to show alternate, but this time only 2 images are showing. My sample code is here.

Thanks for the help in advance.

$(document).ready(function() {

  var count = -1;

  function slideImg() {
    var imgs = $('.img');
    var imgLength = imgs.length - 1;

    count < imgLength ? count++ : count = 0;
    imgs.addClass('slide').eq(count).removeClass('slide');
  }

  setInterval(slideImg, 5000);

});

.img-wrapper {
  position: relative;
  width: 200px;
  height: 300px;
  border: 1px solid #d9d9d9;
  overflow: hidden;
}

.img {
  position: absolute;
  right: -100%;
  -webkit-transition: 2s;
  transition: 2s;
}

.slide {
  right: 0 !important;
  -webkit-transition: 2s !important;
  transition: 2s !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-wrapper">
  <img class="img" src="https://unsplash.it/200/300?image=10" />
  <img class="img" src="https://unsplash.it/200/300?image=23" />
  <img class="img" src="https://unsplash.it/200/300?image=4" />
</div>

Answer 1

The Issue:

All three images are sliding properly, it's just that your first <img> is always covered by one of the other two.

You're adding the class slide to all images, and then removing it from one. That means at any time, two of your images will have the class slide. The one that's later in the DOM will always appear above.

---

Solution 1: (Background-image remains in place)

Force the "upcoming" image to appear above by giving it a higher z-index.

//This would go *before* incrementing/resetting the count
imgs.css("z-index","").eq(count).css("z-index","2");

Sample:

$(document).ready(function() {

  var count = -1;

  function slideImg() {
    var imgs = $('.img');
    var imgLength = imgs.length - 1;
    
    imgs.css("z-index","").eq(count).css("z-index","2");
    count < imgLength ? count++ : count = 0;
    imgs.addClass('slide').eq(count).removeClass('slide');
  }

  setInterval(slideImg, 5000);

});

.img-wrapper {
  position: relative;
  width: 200px;
  height: 300px;
  border: 1px solid #d9d9d9;
  overflow: hidden;
}

.img {
  position: absolute;
  right: -100%;
  -webkit-transition: 2s;
  transition: 2s;
}

.slide {
  right: 0 !important;
  -webkit-transition: 2s !important;
  transition: 2s !important;
}

.img.slide:first-child {
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-wrapper">
  <img class="img" src="https://unsplash.it/200/300?image=10" />
  <img class="img" src="https://unsplash.it/200/300?image=23" />
  <img class="img" src="https://unsplash.it/200/300?image=4" />
</div>

---

Solution 2: (Background image slides-out)

Instead of having slide on all of your images and removing it from one, only apply the slide class to one image at any time:

imgs.removeClass('slide').eq(count).addClass('slide');

Sample:

$(document).ready(function() {

  var count = -1;

  function slideImg() {
    var imgs = $('.img');
    var imgLength = imgs.length - 1;
    
    count < imgLength ? count++ : count = 0;
    imgs.removeClass('slide').eq(count).addClass('slide');

  }

  setInterval(slideImg, 5000);

});

.img-wrapper {
  position: relative;
  width: 200px;
  height: 300px;
  border: 1px solid #d9d9d9;
  overflow: hidden;
}

.img {
  position: absolute;
  right: -100%;
  -webkit-transition: 2s;
  transition: 2s;
}

.slide {
  right: 0 !important;
  -webkit-transition: 2s !important;
  transition: 2s !important;
}

.img.slide:first-child {
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-wrapper">
  <img class="img" src="https://unsplash.it/200/300?image=10" />
  <img class="img" src="https://unsplash.it/200/300?image=23" />
  <img class="img" src="https://unsplash.it/200/300?image=4" />
</div>