jCarousel - achieving an active state AND wrap:circular

A while back I implemented the jCarousel image solution for a client that required a numbered active state. After a bit of googling a found the answer but noticed that the preferred circular option would not work.

What would happen is that once the carousel had cycled through all its (5) images, upon the return to the first, the active state would be lost, because, according to jcarousel it was actually the 6th (the index just keeps on incrementing).

I just went ahead and instead used wrap:'both' which at least had a correctly functioning active state. However now the client says they dont like this effect and simply want the animation to return to position 1 after the final image. This means I need to get'wrap: 'both' working somehow.

Below is my current code. Can someone please solve this one, as its a little above my head!

function highlight(carousel, obejctli,liindex,listate){
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').attr("class","active");
};

function removehighlight(carousel, obejctli,liindex,listate){
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').removeAttr("class","active");
};



    jQuery('#mycarousel').jcarousel({
        initCallback: mycarousel_initCallback,
        auto: 5,
        wrap: 'both',
      开发者_如何学Go  vertical: true,
        scroll: 1,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        animation: 1000,
        itemVisibleInCallback:  highlight,
        itemVisibleOutCallback: removehighlight

    });
});

Thanks in advance

I would put some meta data into an attribute of an element within li, for example:

<ul class="carousel">
  <li><img src="whatever.png" rel="1" /></li>
  <li><img src="whatever.png" rel="2" /></li>
  <li><img src="whatever.png" rel="3" /></li>
</ul>

And then do

function highlight(carousel, obejctli,liindex,listate){
    var nthchild = $("img", obejctli).attr('rel'); //not sure if this is the syntax
    jQuery('.jcarousel-control a:nth-child('+ nthchild +')').attr("class","active");
};

If I recall correctly, objectli is not a jquery object, it's a dom element. You might have to adjust the code since I can't remember how to use selectors in non-jquery objets.