jQuery Swap Images In A Sequence

Question

I'm a jQuery novice to say the least so please bear with me here.

I need to swap out some images in a timed sequence. I found a tutorial online which kind of does what I need. Here is the code:

function swapImagesMaps(){
var $active = $('#maps .active');
var $next = ($('#maps .active').next().length > 0) ? $('#maps .active').next() : $('#maps img:first');
$active.fadeOut(function(){
    $active.removeClass('active');
    $next.fadeIn().addClass('active');
    });

}

setInterval('swapImagesMaps()', 2000);

This is cool, but I have 4 different div containers with images in them, and I want them to fade every 2 seconds.

So div1 will change and then 2 seconds later div2 will change, and so on. Once it loops through all 4 div containers, it will go back to div1 and change that one again and just keep cycling through.

Hopefully this makes sense and I appreciate any help or suggestions!

Answer 1

You can store the <div> elements in an array, then use an incrementing index to determine which element to change.

Answer 2

Something like this? I am using this jQuery Carousel.

Just include that js file and call it like this:

        $('#banner_container').carousel({
            autoSlide: true, 
            autoSlideInterval: 4000,
            pagination: true
        });