JQuery jCarousel - 禁用外部控件

发布于 2024-08-31 18:31:54 字数 358 浏览 12 评论 0原文

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

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

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

是否有一个回调我可以用来允许我将按钮的活动图像与非活动图像交换?

I'm using JQuery and jcarousel, using external navigation controls:
http://sorgalla.com/projects/jcarousel/examples/static_controls.html

The problem here is the navigation buttons no longer disable as shown here:

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

Is there a callback I can use to allow me to swap the active image of a button with an inactive image?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

夏天碎花小短裙 2024-09-07 18:31:55

更新

演示: 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

这周包括添加适当的类到您自己的 NEXT & PREV 按钮如下所示:

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

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

最后是一些 css,用于将图像置于滑块的中心

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

这应该可以按预期工作!但只要看看演示,你就明白了,我已经评论了重要的部分!

UPDATED

DEMO: http://jsbin.com/ifomi4/5 SOURCE: http://jsbin.com/ifomi4/5/edit

In responce to your Last comment:

All the code you need ( CSS included ) is in the source, i have commented it so you easy see!

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);
    }

}

DEMO: http://jsbin.com/ifomi4

SOURCE: http://jsbin.com/ifomi4/edit

The tweek consist of add a proper class to your own NEXT & PREV button like this:

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

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

and finally a little of css for have the image at the center of our slider

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

This should work as expected! but just see the demo and you got it, i have commented the essential parts!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文