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

jCarousel next and prev button, disable?

提问by Dennis

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...

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

How do i do this?

我该怎么做呢？

I initialize the script like this:

我像这样初始化脚本：

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

回答by Dennis

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

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

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

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

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

回答by vietean

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: disablefor nextand previousbuttons:

   <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>
   

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

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

2. 使用 Javascript，此解决方案与第一个相同。我们应该删除类：disablefornext和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: 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.

P/S：我只是尝试阅读它的文档并使用Firebug（~Edit on the fly）来检测。如果可以，你可以试试。很有趣。