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

Posted 2023-02-25

【中文标题】jCarousel 下一个和上一个按钮，禁用？

【英文标题】：jCarousel next and prev button, disable?

【发布时间】：2011-08-30 13:41:29

【问题描述】：

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

我该怎么做？

我这样初始化脚本：

jQuery(document).ready(function() 
                                jQuery('#mycarousel').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) 来检测。如果可以的话，你可以试试。很有趣。

【讨论】：

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