CODEWITHSUNDEEP
javascriptjquery
nader
nader

Reputation: 71

slide images with different times in jquery

I have a div with some images

<div class="slides_container">
          <div class="slides">
            <img src="gif256/3.jpg" data-time="5000" class="myimg"/>
            <img src="gif256/4.gif" data-time="3000" class="myimg"/>
            <img src="gif256/5.gif" data-time="4000" class="myimg"/>
            <img src="gif256/6.gif" data-time="5000" class="myimg"/>
            <img src="gif256/3.jpg" data-time="3000" class="myimg"/>
          </div>
</div>

I want to slide this images with delay writen in data-time attribute. I use this code

<script type="text/javascript">              
$('.slides img:gt(0)').hide();
setInterval(function(){
  $('.slides :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.slides');},
  5000);
</script>

but this code slides images with same delay(5 sec). How can I use each image's data-time to scroll it? thanks.

Upvotes: 2

Views: 64

Answers (1)

Kuba
Kuba

Reputation: 1455

You can use setTimeout() and recursion instead of setInterval. 

$('.slides img:gt(0)').hide();
changeSlide();
function changeSlide(){
  var changeIn = +$('.slides :first-child').data("time");
  console.log(changeIn);
  setTimeout(function(){
   
    $('.slides :first-child').fadeOut()
     .next('img').fadeIn()
     .end().appendTo('.slides');
     changeSlide();
  }, changeIn);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slides_container">
      <div class="slides">
        <img src="https://dummyimage.com/300x200/000000/fff" data-time="6000" class="myimg"/>
        <img src="https://dummyimage.com/300x200/333333/fff" data-time="2000" class="myimg"/>
        <img src="https://dummyimage.com/300x200/666666/fff" data-time="4000" class="myimg"/>
      </div>
</div>

Upvotes: 2

Related Questions