jquery - Alternate Slide/Un-slide of Images -

could me issue. want make each image show alternate, time 2 images showing. sample code here.

thanks 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>

the issue:

all 3 images sliding properly, it's first <img> covered 1 of other two.

you're adding class slide images, , removing one. means @ time, 2 of images have class slide. 1 that's later in dom appear above.

---

solution 1: (background-image remains in place)

force "upcoming" image appear above giving higher z-index.

//this go *before* incrementing/resetting 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 of images , removing one, apply slide class 1 image @ 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>