jcarousel, I need :active state on external controls

Question

I am running a Jcarousel and I want to add a.active to the current pagination option. I have seen other posts around about this same thing.
/** * We use the initCallback callback * to assign functionality to the controls */ function mycarousel_initCallback(carousel) { jQuery('.jcarousel-control a').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; });

jQuery('#mycarousel-next').bind('click', function() {
    carousel.next();
    return false;
});

jQuery('#mycarousel-prev').bind('click', function() {
    carousel.prev();
    return false;
});
};

// Ride the carousel...
jQuery(document).ready(function() {
jQuery("#mycarousel").jcarousel({
    scroll: 1,
    initCallback: mycarousel_initCallback,
    // This tells jCarousel NOT to autobuild prev/next buttons
    buttonNextHTML: null,
    buttonPrevHTML: null
});
});
</script> 

Thats the initialize code

and the pagination lives inside:
<ul class="jcarousel-control"> <% ([email protected]).each do |n| %> <li><a href="#"> <%= n %></a></li> <% end %> </ul>

Its a rails app, so rails is creating the list based on the number of projects in the group.

Any ideas? Seems like it should be pretty simple.. But I don't know js at all.

Answer 1

Ok so I think I figured out apiece of this on my own. First if you simply provide

 ul.jcarousel-control li a:focus {background-position:0 -11px}

This sets the current control item to be "on"

This doesn't work though until its clicked.

Answer 2

Hi TJ -

I am facing this problem also. I want active states on the pagination. Did you find a good solution?

I tried your a:focus, but it does nothing for me?

But even if it did, its not really the best solution folr me, as my carousel is set to auto-scroll

cheers

Answer 3

I also needed this and finally found a solution, here is my code:

jQuery("#mycarousel").jcarousel({
        scroll: 1,
        initCallback: mycarousel_initCallback,
        // This tells jCarousel NOT to autobuild prev/next buttons
        buttonNextHTML: null,
        buttonPrevHTML: null,
        itemVisibleInCallback: {
            onAfterAnimation: function(c, o, i, s) {
            --i;
              jQuery('.jcarousel-control a').removeClass('active').addClass('inactive');
              jQuery('.jcarousel-control a:eq('+i+')').removeClass('inactive').addClass('active');
            }
          }
    });