JQuery jCarousel - 禁用外部控件

Posted 2023-02-25

【中文标题】JQuery jCarousel - 禁用外部控件

【英文标题】：JQuery jCarousel - Disabling external controls

【发布时间】：2010-05-04 13:50:33

【问题描述】：

我正在使用 JQuery 和 jcarousel，使用外部导航控件： http://sorgalla.com/projects/jcarousel/examples/static_controls.html

这里的问题是导航按钮不再禁用，如下所示：

sorgalla.com/projects/jcarousel/examples/static_simple.html

我可以使用回调来将按钮的活动图像与非活动图像交换吗？

【参考方案1】：

更新

演示： http://jsbin.com/ifomi4/5 来源： http://jsbin.com/ifomi4/5/edit

回复您的最后评论：

您需要的所有代码（包括 CSS）都在源代码中，我已经对其进行了注释，以便您轻松查看！

function disableCustomButtons(carousel)

    var prev_class = 'jcarousel-prev-disabled jcarousel-prev-disabled-horizontal';
    if (carousel.first == 1) 
    $('#mycarousel-prev').attr('disabled', 'true').addClass(prev_class);
     else 
    $('#mycarousel-prev').attr('disabled', 'false').removeClass(prev_class);
    

    var next_class = 'jcarousel-next-disabled jcarousel-next-disabled-horizontal';
    if (carousel.last == carousel.size()) 
    $('#mycarousel-next').attr('disabled', 'true').addClass(next_class);
     else 
    $('#mycarousel-next').attr('disabled', 'false').removeClass(next_class);
    

---

演示： http://jsbin.com/ifomi4

来源：http://jsbin.com/ifomi4/edit

tweek 包括为您自己的 NEXT 和 PREV 按钮添加一个适当的类，如下所示：

<a class="jcarousel-prev jcarousel-prev-horizontal" href="#">&nbsp;</a>

<a class="jcarousel-next jcarousel-next-horizontal" href="#">&nbsp;</a>

最后一点 css 让图像位于滑块的中心

  /* SET THE MARGIN AS YOU NEED */
  .jcarousel-scroll a  margin: 25px 0 

这应该可以按预期工作！但只要看看演示就知道了，我已经评论了重要的部分！

【讨论】：

奇怪，我尝试添加评论，但没有成功。我会再试一次...我了解如何禁用内置导航按钮以及如何使用外部控件，即列表之外的控件。但是，使用他们的示例sorgalla.com/projects/jcarousel/examples/static_controls.html 控制了一个简单的超链接。我想保留内置按钮的图像按钮导航，包括它们的功能，即在开始和结束时更改为禁用（灰色）图像。但是，我需要在列表之外执行此操作 - 因此需要外部控件。

真的很痛苦，有没有办法在 mycarousel div 之外设置下一个和上一个按钮？我的想法是我有一个内容 div，它在顶部分成一个标题 div，然后是下面的一个内容 div。我希望控件位于标题 div 中（右对齐）和内容 div 中的轮播。目前，控件仅在嵌套在 mycarousel div 中时才起作用。作为一种解决方法，我将 mycarousel 和 div 包装在我自己的 div 容器之外。它需要相当多的 css 修改，但最终结果看起来正是我想要的 :)