jQuery sliding header and changing image

Question

I am trying to create a function that animates the header from right to left, and then left to right.

You can see the start of it here: http://opportunityfinance.net/Test/financeforum2013/

When the page loads it begins to slide the header to the right, revealing an image on the left, and then back, revealing an image on the right. I need to keep doing this over and over and over again. And each time the images on the right and left need to change. I have 5 images that I would like to cycle through for the side images. The Small Business Finance Forum image should remain constant inbetween the two changing side images, and just move right to left and then left to right.

Here is the code I am using thus far. The jQuery delay of 10 seconds doesn't seem to work however, and I can't figure out how to call the function again when the animation is complete.

jQuery:

$(document).ready(function(){
    $(".header_right").html('<img src="images/1.jpg" alt="OFN" />');
    $(".header_left").html('<img src="images/2.jpg" alt="OFN" style="max-height: ' + $("div.header").height() + 'px' + ';" />');
    slide();
});

function slide(slideVar)
{
    slideVar = !slideVar ? 2 : slideVar;
    slideVar = slideVar > 5 ? 1 : slideVar;

    $(function () {
        var mrgLeft = parseInt($(".header_right").css('marginLeft'),10) == 0 ? $(".header_right").outerWidth() : 0;
        $(".header_left").html('<img src="images/' + slideVar + '.jpg" alt="OFN" style="max-height: ' + $("div.header").height() + 'px' + ';" />');

        $("img.hImage").delay("10000").animate({ marginLeft: mrgLeft + 'px' }, { duration: 3000, queue: false });
        $(".header_left").delay("10000").animate({ marginLeft: mrgLeft + 'px'}, { duration: 3000, queue: false });
        $(".header_right").delay("10000").animate({ 'right': '-' + mrgLeft + 'px'}, { duration: 3000, queue: false });
    });
    slideVar++;
}

HTML setup:

<div class="header">
    <img class="hImage" src="images/header.jpg" alt="Small Business Finance Forum" />
    <div class="header_right"></div>
    <div class="header_left"></div>
</div>

CSS:

.hImage
{
    width: 64%;
}

div.header_right
{
    position: absolute;
    display: block;
    right: -10px;
    top: 0px;
    width: 35.5%;
}

div.header_left
{
    position: absolute;
    display: block;
    left: -35.5%;
    top: 0px;
    width: 35.5%;
}

div.header
{
    box-sizing: border-box;
    background-color: #00457E !important;
    width: 100%;
}

Basically, I just want to slide the main "header.jpg" image left and right, each time changing the left and right image up to and including 5.jpg. It should loop from 1.jpg to 5.jpg. But mainly, I can't figure out how to fix the delay issue (since it doesn't work) and to make it loop within the slide() function when the animation is complete.

Can someone please help me get started with this?

Thanks guys :)

Answer 1

I've created a little image slider that you might like to use as a starting point. It uses a container of fixed width with an id #container. Within it are containers for the three different images. You can change the widths of all of these in the css to suit your needs.

The animation uses the complete function to call a swapImg function. This swaps the left or right image depending on which direction the image container has just moved.

The images swapped are taken from the image array. So alternate images are displayed on alternate sides. So every second image is displayed on the right... This means you will need to use an even number of images in the array, or change the script.

here's the fiddle

http://jsfiddle.net/Rgh2B/5/