How to highlight external controller for JCarousel

June 25, 2009

JCarousel is  a great JQuery plugin where you put multiple  image and text into horizontal or vertical slide.

Sadly, there is no proper documentation on how to highlight the external controller.

After few try and error, I manage to get the selected number in highlight mode ( using CSS of course ).

My external controller is a collection of hyperlink inside a DIV.

<div id=”jcarousel-control”>

<a href=”#”>1</a>

<a href=”#”>2</a>

<a href=”#”>3</a>

</div>

Below are the Jquery code.

<script type="text/javascript">
// it will append class="selected" into <a>
// <a href="#">1</a> to <a href="#" class="selected">1</a>
function highlight(carousel, obejctli,liindex,listate){	
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').attr("class","selected");
};
// it will remove last selected slide from <a>
// <a href="#" class="selected">1</a> to <a href="#">1</a>
function removehighlight(carousel, obejctli,liindex,listate){
     jQuery('.jcarousel-control a:nth-child('+ liindex +')').removeAttr("class","selected");
};
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
	itemVisibleInCallback:  highlight,
	itemVisibleOutCallback: removehighlight		
    });
});
</script>

Feel free to use the comment area if you need any help.
About these ads

9 Responses to “How to highlight external controller for JCarousel”

  1. thaddeusmt Says:

    Thanks for this! It works quite well. Cheers!

  2. Sorin Marian Says:

    this is not working well if you use a circular carousel (wrap: ‘circular’ )

  3. John Gile Says:

    same problem – the index just keeps going up with circular wrap… solution?

  4. maki3000 Says:

    “same problem – the index just keeps going up with circular wrap… solution?” -> put the beforeStart callback in the plugin after the block where the current (curr) is calculated…

  5. Igor Gomes Says:

    Please my friend i need help! whats add button to external controls? help-meeeeeeeeeeee :( THANKS!


  6. use addClass and removeClass instead of attr and removeattr functions..

    function highlight(carousel, obejctli,liindex,listate){
    jQuery(‘#mycarousel li:nth-child(‘+ liindex +’)’).addClass(“selected-program”);
    };
    function removehighlight(carousel, obejctli,liindex,listate){
    jQuery(‘#mycarousel li:nth-child(‘+ liindex +’)’).removeClass(“selected-program”);
    };


  7. does anyone get correct external highlighting working with wrap: circular ?


  8. Regarding wrap:circular, just calculate the current index.
    For example if your slider has 3 slides, use something like this:
    var i = liindex % 3 == 0 ? 3 : liindex % 3;

  9. ragingblues Says:

    I have some text being displayed. How do I retrieve it ?? Please help.


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: