CarouFredSel: Hide prev(left) button when page loads

Question

I'm trying to make the prev(left) button of my carouFredSel hidden initially and become visible only when the next button is clicked on. Since my carousel if neither circular nor infinite, it doesn't make sense to show the left(prev) button when the page loads.

I'd be grateful if you could also help out in hiding the next(right) button on reaching the last element in the carousel. Thanks.

The script I'm using is:

$("#models-carousel").carouFredSel({
                    items: 4,
                    circular: false,
                    infinite: false,
                    auto    : false,
                    prev    : { 
                        button  : "#models-carousel_prev",
                    },
                    next    : { 
                        button  : "#models-carousel_next",
                    },
                    scroll : {
                        duration: 1000,                        
                    }
                });

Answer 1

You should have a automatically added class "disabled" with the prev/next buttons by the Carousel plugin:

id="models-carousel_prev" class="disabled"

id="models-carousel_next" class="disabled"

You can easily use this class in your CSS to enable/disable the proper button.

In your CSS, just use:

#models-carousel_prev.disabled,
#models-carousel_next.disabled{display:none}