jQuery setinterval does not show first element

Question

Hi,

I am creating this content slider, you can view/edit here:

http://jsbin.com/esame4

I have put in place setInterval so that animation runs automatically, however, when it is run for the first time, google image is shown but not afterwords. Should be simple but i am unable to figure out the problem.

Answer 1

There you go: http://jsbin.com/esame4/3 (but the previous function is still broken!)

Fixed the previous function too in http://jsbin.com/esame4/4

Answer 2

Problem is in:

if ($($curbox).next().attr('class') === 'box')
    {
      $('#content_navigator .box').hide();
      $($curbox).next().fadeIn(1000);
      $curbox = $($curbox).next();
    }
else
    {
      $curbox = ('#content_navigator .box:first');
    }

You switch to the first element, avoid displaying it, then move onto the next.

Change to the following:

if ($($curbox).next().attr('class') === 'box')
    {
      $('#content_navigator .box').hide();
      $($curbox).next().fadeIn(1000);
      $curbox = $($curbox).next();
    }
else
    {
      $('#content_navigator .box').hide();
      $('#content_navigator .box:first').fadeIn(1000);
      $curbox = $('#content_navigator .box:first').next();
    }

Also fixed your previous button. See at: http://jsbin.com/esame4/6/

Changed once again;. Made it more uniform throughout.