jCarousel con controles externos

Siempre he elegido usar la librería jCarousel para implementar los carruseles, es una librería basada en el framework jQuery. En este ocasión tuve que implementarla poniéndole vínculos externos, es decir, con los links afuera, que cambiara automáticamente y que cuando se presionara algun vínculo, siguiera el orden. Este era para hacer un banner, de estos que son muy populares actualmente.

Tuve que hacer algunas implementaciones y tras algunos clicks en google, conseguí hacer que el carrusel hiciera lo esperado.

Aquí los pasos:

1. Descargar la última version del jCarousel (http://sorgalla.com/jcarousel/) y poner la última versión de jQuery al inicio del documento (http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js). Empezamos por construir de la forma habitual los elementos del carrusel, pero al principio construir también los enlaces los cuales más abajo les daremos funcionalidad:

    

        1
        2
        3
        4
        5
        6
    

   

        
• 
              
  
   
                  
                 
  Texto del banner 1
  
              
  
          

        

• 
              
  
  
                  
                 
  Texto del banner 2
  
              
  
          

        

• 
              
  
  
                  
                 
  Texto del banner 3
  
              
  
          

        

• 
              
  
  
                  
                 
  Texto del banner 4
  
              
  
          

        

• 
              
  
  
                  
                 
  Texto del banner 5
  
              
  
          

        

• 
              
  
  
                  
                 
  Texto del banner 6
  
              
  
          

   

2. Hacer una función que construya los vínculos externos para que puedan ser presionados en cualquier momento del banner:
function llamaCarrusel (carousel) {
    $('.jcarousel-control a').bind('click', function() {
     var index = $(this).attr("id").split("_");
     carousel.scroll($.jcarousel.intval(index[1]));
     $(".jcarousel-control a").removeClass("active"); 
     $(this).addClass("active");
       return false;
    });
    $('.jcarousel-scroll select').bind('change', function() {
        carousel.options.scroll =               $.jcarousel.intval(this.options[this.selectedIndex].value);
        return false;
    });
};
Donde .jcarousel-control es el elemento que pusimos al inicio de nuestro HTML. Lo que hace esta función será agregar una clase a cada elemento, la clase .active en el elemento cuando se haga click y al mismo tiempo removerla de todos los demás elementos.

3. Crear la función que hará posible saber en qué elemento se encuentra actualmente el script y a ése ponerle la clase .active y eliminarla del resto:
function activaBoton (c, o, i, s) {
var size = c.options.size; 
i = (((i - 1) % size) + size) % size;            
$('.jcarousel-control a').removeClass('active').addClass('inactive');
$('.jcarousel-control a:eq('+i+')').removeClass('inactive').addClass('active');
}
4. Por último hacer la llamada de ambos script en los eventos initCallback e itemVisibleInCallback, esto  al inicio del documento:

$(document).ready(function() {
if ($("#bannerHome").length) {
$("#bannerHome").jcarousel({
scroll: 1,
auto: 4,
wrap: 'circular',
initCallback: llamaCarrusel,
itemVisibleInCallback: activaBoton,
});
} 
});
Espero a alguien le sirva.