Adding fadeout fadein on background image of jQuery slider

Question

I create one jQuery slider. I just want to show/hide left and right arrow on first and last thumbnail apperance, also want to animate the background image fadein/fadeout method. Here is the demo link http://jsfiddle.net/NwmLL/8/ Please help me.

Answer 1

To handle your arrows changing i added a simple function to check if liSelect is at first or last option and change hide/show respectively.

function checkArrows() {
        if($('ul#carousel>li:last').is('.liSelect')) {
            $(".rightArrow").fadeOut('slow');
        }
        else {

           $(".rightArrow").fadeIn('slow'); 
        }

        if($('ul#carousel>li:first').is('.liSelect')) {
            $(".leftArrow").fadeOut('slow');
        }
        else {
           $(".leftArrow").fadeIn('slow'); 
        }
    }​

Also to enable you to fade your background in and out you need to make sure it wont hide your front layer (ie your carousel) so i added another div underneath as an example.

Fiddle

Hope this helps :)