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