A website I inherited is using  Jon Raasch's excellent simple  jQuery carousel to display a set of images (which we load via an sql database). The images fade in at 5 second intervals, and It works perfectly.

However, the customer now wants to have the initial image stay on the screen for a longer period than all the others. I'm a jQuery/JavaScript novice, and although I can see from googling that I may need to play with :first-child or IMG:first or .slideshow-Item.first(), I can't get it to work.

Any suggestions will be gratefully received.

The js is below.  

-----------------

function slideSwitch() {

    var $active = $('#front-page-slideshow li.active-slide');

    if ( $active.length == 0 ) {

        $active = $('#front-page-slideshow li:last');

    }

    // use this to pull the images in the order they appear in the markup

    var $next = $active.next().length ? $active.next()

        : $('#front-page-slideshow li:first');

    // uncomment the 3 lines below to pull the images in random order

    

    // var $sibs  = $active.siblings();

    // var rndNum = Math.floor(Math.random() * $sibs.length );

    // var $next  = $( $sibs[ rndNum ] );

    $active.addClass('last-active-slide');

    $next.css({opacity: 0.0})

        .addClass('active-slide')

        .animate({opacity: 1.0}, 1000, function() {

            $active.removeClass('active-slide last-active-slide');

        });

}

$(function() {

    setInterval( slideSwitch, 5000 );

});

----------------------