【问题标题】:JQuery jCarousel - Disabling external controlsJQuery jCarousel - 禁用外部控件
【发布时间】: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

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

【问题讨论】:

    标签: jquery list jcarousel carousel


    【解决方案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 包括为您自己的 NEXTPREV 按钮添加一个适当的类,如下所示:

    <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 修改,但最终结果看起来正是我想要的 :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多