Question

I have this markup:

<div id="imagedisplay">
    <div class="slider_item active"></div>
    <div class="slider_item"></div>
    <div class="slider_item"></div>
    <div class="slider_item last"></div>
</div>

and this script

setInterval(function(){
    $('.slider_item.active').fadeOut().removeClass('active')
        .next('.slider_item').fadeIn().addClass('active');
}, 5000);

How do I make this loop in the best way? Right now the last image just fades out, without the first image fading in again.

Answer 1

Check if nextItem has items and if not set it back to the first:

var nextItem = $('.slider_item.active')
    .fadeOut()
    .removeClass('active')
    .next('.slider_item');

if (nextItem.length === 0) {
   nextItem = $('.slider_item').first();
}

nextItem.fadeIn().addClass('active');

Here’s an example: jsFiddle