Question

I have the following code:

<div id="fp-slides">
  <div id="fp-slide-design" class="current"></div>
  <div id="fp-slide-seo"></div>
  <div id="fp-slide-ecommerce"></div>
  <div id="fp-slide-cms"></div>
</div>

I would like the class="current" to change between the 4 division every 5 seconds. What function in jQuery should I be looking at?

Answer 1

Take a look at this approach.

Just change the value 400 with 5000.

var $elements = $('#fp-slides div'); 

var total_elements = $elements.length;
var element_with_class = 0;

window.setInterval( function () {

  $elements.eq(element_with_class).removeClass('current');

  element_with_class += 1;

  if ( element_with_class === total_elements )
  {
      element_with_class = 0;
  }

  $elements.eq(element_with_class).addClass('current'); 

}, 5000 );