Question

So let’s say I have five divs. I am trying to show the first 3 divs and then showing a new div and removing a div on a set interval.

Here’s my HTML code:

<div class="speaker">One</div>
<div class="speaker">Two</div>
<div class="speaker">Three</div>
<div class="speaker">Four</div>
<div class="speaker">Five</div>

The JS Demo is here http://jsfiddle.net/mirzar/Sny3e/8/.

Any idea on what I am doing wrong in terms of not keeping the current index? Once it has show the Fifth speaker, I am trying to iterate back to go from “Three Four Five” to “Two Three Four” and then “One Two Three” and then re-starting from the beginning

Answer 1

I forked your fiddle and tried to not modify as much as possible. I set a flag to check which direction we are going up or down. When we are going back down the index we check to see if were back at 0 again, if so we reset all of our index positions to their default.

When you are using the current index as the condition on each pass, what ends up happening is you get to a point where it teeters back and forth between passing and failing. Which is why it is better, to set a ‘flag’ variable to dictate which set of statements should be run.

var speakers = $(".speaker").length;
var currIndex = 0;
var endIndex = 0;
var reverseIndex = 0;
var up = true;

if (speakers > 3) {
   $(".speaker").hide();
   $('.speaker:lt(3)').show();
   var refreshId = setInterval(speaker_slides, 2000);
}

function speaker_slides() {

  if (up) {
    endIndex = currIndex + 3;
    $(".speaker").eq(currIndex).hide(500);
    $(".speaker").eq(endIndex).delay(500).show(500);
    currIndex++;
    $("#currIn").empty().append(currIndex);
    up = currIndex >= 2 ? false : true;
  } else {
    currIndex--;
    endIndex = currIndex;
    reverseIndex--;
    $(".speaker").eq(reverseIndex).hide(500);
    $(".speaker").eq(endIndex).delay(500).show(500);
    if(currIndex == 0) {
      up = true;
      endIndex = 0;
      reverseIndex = 0;
    }
  }

}

This can be cleaned up quite a bit but I think it’s working as you were originally intending it to.

Hope it helps

http://jsfiddle.net/ZjcYd/