JQuery jCarousel - Disabling external controls

Question

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?

Answer 1

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="#">&nbsp;</a>

<a class="jcarousel-next jcarousel-next-horizontal" href="#">&nbsp;</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!