jQuery setTimeout in loop of each

Question

I am new to jQuery. I have number of divs which I want to fade in 1 by 1 in an endless loop. To fadein I am using CSS animation on class active; here is what I tried, but this only work once.

HTML

<div id="bgContainer">
    <div class="slides"> <img src=".." /> </div>
    <div class="slides"> <img src=".." /> </div>
    <div class="slides"> <img src=".." /> </div>
    <div class="slides"> <img src=".." /> </div>
</div>

jQuery

$('#bgContainer div').each(function(i) {
var currentSlide = $(this);
currentSlide.removeClass('active');
i = i + 1;
var intervel = i * 1000;
setTimeout(function () { SliderBG(currentSlide); }, intervel);    
});

function SliderBG(currentSlide) {
    currentSlide.addClass('active');
}

Personally I would make this a recursive call to a function, giving it the array of elements it should loop over, and the next index to process. The method would perform it's work and at the end call a setTimeout to itself a second later, providing the array and next index to process, resetting the index to zero when it reaches the end of the array. — Taplar
– Taplar, Commented Apr 10, 2018 at 17:29
because you have applied a unique class to every div. you need to change name of class. — Abdul Qayyum
– Abdul Qayyum, Commented Apr 10, 2018 at 17:29
@kamranshah I posted a solution below using a recursive timeout. — Taplar
– Taplar, Commented Apr 10, 2018 at 18:20

Taplar · Accepted Answer · 2018-04-10 18:20:31Z

(function(){
  //get all the slides
  var $slides = $('#bgContainer div');
  //initialize the index to the first slide
  var index = 0;
  
  //start the loop
  setTimeout(sliderBG, 1000);
  
  function sliderBG () {
    //remove active from all the elements
    $slides.removeClass('active');
    //put it on the next index
    $slides.eq(index).addClass('active');
    //increment the index, reset to 0 at the end
    index = ++index % $slides.length;
    //continue loop after a second
    setTimeout(sliderBG, 1000);
  }
}());

.slides {
  background-color: #888;
}

.slides.active {
  background-color: #aaa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bgContainer">
  <div class="slides">Slide 1</div>
  <div class="slides">Slide 2</div>
  <div class="slides">Slide 3</div>
  <div class="slides">Slide 4</div>
</div>

Carsten Løvbo Andersen · Accepted Answer · 2018-04-10 17:35:12Z

This might be what you want, It will loop over each element and add the .active class and when it gets to the end it will start over.

$(document).ready(function() {
  Timer();
});

function Timer(){
var slides = $('#bgContainer .slides'),
    counter = 0,
    timer = setInterval(function() {
      SliderBG(slides[counter]);
      counter++
      if (counter === slides.length) {
        clearInterval(timer);
        Timer()
      }
    }, 1000);
}

function SliderBG(currentSlide) {
  $('#bgContainer .slides.active').add(currentSlide).toggleClass('active');
}

.slides {
  display: none;
}

.slides.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bgContainer">
  <div class="slides"> <img src=".." alt="1"/> </div>
  <div class="slides"> <img src=".." alt="2"/> </div>
  <div class="slides"> <img src=".." alt="3"/> </div>
  <div class="slides"> <img src=".." alt="4"/> </div>
</div>

friend I tried your code but it adds the class active to each div while the previous div still contains that class .. at times all divs are having active and other times non of them having active

Collectives™ on Stack Overflow

jQuery setTimeout in loop of each

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related