CODEWITHSUNDEEP
javascriptjqueryjcarousel
user431619
user431619

Reputation:

jCarousel next and prev button, disable?

Im using http://sorgalla.com/projects/jcarousel/ as a slider.... It shows one image at a time, and a total of four images... When displaying the first image, i dont want the prev arrow to be visible, and the same if im at number 4 image, i dont want the next arrow to be visible...

How do i do this?

I initialize the script like this: 

jQuery(document).ready(function() {
                                jQuery('#mycarousel').jcarousel();
                            });

Upvotes: 3

Views: 15666

Answers (2)

Dennis
Dennis

Reputation: 32598

You can use CSS to hide the arrows. Adding the disabled classes is handled by the plugin itself.

.jcarousel-prev-disabled, .jcarousel-next-disabled
{
    visibility:hidden;
}

Demo: http://jsfiddle.net/ubanC/88/

Upvotes: 12

vietean
vietean

Reputation: 3033

You can cheat by using two below options:

  1. Using CSS,you should override to set some below classes:

    <style>
jcarousel-prev-disabled,
jcarousel-next-disabled,
jcarousel-prev-disabled-horizontal,
jcarousel-next-disabled-horizontal{
    background-position:0 0;
}
</style>

  2. Using Javascript, this solution is same as the first. We should remove the classes: disable for next and previous buttons:

    <script>
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        itemFirstOutCallback: {
            onBeforeAnimation: function(){

            },
            onAfterAnimation: function(){
                $(".jcarousel-prev").removeClass("jcarousel-prev-disabled");
                $(".jcarousel-prev").removeClass("jcarousel-prev-disabled-horizontal");
            }
        },
        itemLastOutCallback: {
            onBeforeAnimation: function(){

            },
            onAfterAnimation: function(){
                $(".jcarousel-next").removeClass("jcarousel-next-disabled");
                $(".jcarousel-next").removeClass("jcarousel-next-disabled-horizontal");
            }
        }
    });
});
</script>

P/S: I just try to read it's document and use Firebug(~Edit on the fly) to detect. If you could, you can try. It's fun.

Upvotes: 2

Related Questions