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>


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() {
	itemVisibleInCallback:  highlight,
	itemVisibleOutCallback: removehighlight		

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

10 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.

  10. E’ vero; nel mondo virtuale peru00f2, mi sembra che le caratteristiche delle persone vengano in qualche modo ampliate….forse perchu00e8 ci si sente piu00f9 “liberi” di esprimersi che nella vita reale dove, dopotutto, guardare negli occhi una persona puu00f2 creare qualche forma di inibizione. Come on

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: