Question

I have 4 banner images, and I want to cycle through them using a basic fade animation in an infinite loop. I found this jQuery plugin: http://jquery.malsup.com/cycle/ and have tried to do it this way:

HTML:

<div id="banner">
    <div id="home-banner-1"></div>
    <div id="home-banner-2"></div>
    <div id="home-banner-3"></div>
    <div id="home-banner-4"></div>
</div>

CSS:

#banner {
    margin: 0 auto 20px;
    width: 940px;
}
#home-banner-1 {
    background: url(../Images/home_banner.png) no-repeat 0 0;
    height: 271px;
}
#home-banner-2 {
    background: url(../Images/home_banner.png) no-repeat 0 -272px;
    height: 271px;
}
#home-banner-3 {
    background: url(../Images/home_banner.png) no-repeat 0 -544px;
    height: 271px;
}
#home-banner-4 {
    background: url(../Images/home_banner.png) no-repeat 0 -816px;
    height: 271px;
}

JAVASCRIPT:

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#banner').cycle('fade');
    });
</script>

What ends up happening is that NONE of the banners show up due to position: absolute being set on each one during the cycle. What am I missing here? Shouldn’t this just work? Is there a better way to do this?

Answer 1

I was unable to make this work using any of the answers given to date, so my answer to the problem was to remove the sprite and rather than using 4 div tags styled with backgrounds, to use 4 separate img tags pulling 4 separate images. Then everything started to work as advertised.