jquery cycle plugin showing last image when load/refresh

Question

I get problem when using cycle plugin, I get last image when load

you can see the web link here - http://www.visitclearwaterflorida.com/index.php/

and this is what I see when first load/refresh - http://www.elixirbox.com/temp/header1.jpg

Is there anyone know what the problem ?

this is my code :

<div id="headerimgs">
        <div class="headerimg bg1">
            <div class="container_16">
                <div class="grid_16"><div class="caption">Sunsets at Pier 60, Clearwater Beach</div></div>
            </div>
        </div>
        <div class="headerimg bg2">
            <div class="container_16">
                <div class="grid_16"><div class="caption">'Winter' the Dolphin invites you to visit the Clearwater Marine Aquarium!</div></div>
            </div>
        </div>
       <div class="headerimg bg3">
            <div class="container_16">
                <div class="grid_16"><div class="caption">Clearwater Beach </div></div>
            </div>
        </div>
        <div class="headerimg bg4">
            <div class="container_16">
                <div class="grid_16"><div class="caption">Sunset at Pier 60, Clearwater Beach</div></div>
            </div>
        </div>
        <div class="headerimg bg5">
            <div class="container_16">
                <div class="grid_16"><div class="caption">Clearwater Beach Walk</div></div>
            </div>
        </div> 
    </div>

I call image background from CSS class "bg1, bg2.. bg5"

Thanks

Answer 1

I suggest that you change your CSS to be something like this:

#headerimgs>div:first-child {display:block}
#headerimgs>div {display:none}

Or consequently if you are generating this with php you can have all of the imgs after the first with style="display:none"

Here is a link to the FAQ page describing the technique. http://jquery.malsup.com/cycle/faq.html