jCarousel 下一个和上一个按钮，禁用？答案

【问题标题】：jCarousel next and prev button, disable?jCarousel 下一个和上一个按钮，禁用？
【发布时间】：2011-08-30 13:41:29
【问题描述】：

我使用http://sorgalla.com/projects/jcarousel/ 作为滑块.... 它一次显示一个图像，总共显示四个图像...当显示第一张图像时，我不希望上一个箭头可见，如果我在第 4 个图像上也是如此，我不希望下一个箭头可见...

我该怎么做？

我这样初始化脚本：

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

【问题讨论】：

标签： javascript jquery jcarousel

【解决方案1】：

您可以使用 CSS 来隐藏箭头。添加禁用的类由插件本身处理。

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

演示：http://jsfiddle.net/ubanC/88/

【讨论】：

【解决方案2】：

您可以使用以下两个选项作弊：

使用 CSS，您应该重写以设置以下一些类：

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

使用Javascript，此解决方案与第一个相同。我们应该删除类：disable for next 和 previous 按钮：

<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：我只是尝试阅读它的文档并使用Firebug(~Edit on the fly) 来检测。如果可以的话，你可以试试。很有趣。

【讨论】：

不知道为什么这不是选择的答案 - 它更全面！