jCarousel no se dibuja dentro de un div oculto

Question

Estoy usando un div para llenar una lista ul/li y luego dibujar un jCarousel fuera de él. Así que esto funciona bien:

$('#mycarousel').jcarousel(); 

aquí está el problema:

El div que contiene los elementos ul/li puede estar escondido tras el clic de otro botón. Cuando el div está oculto, y cambio el tamaño de la ventana del navegador, el jCarousel también intenta volver a dibujarse, pero como está oculto, no puede dibujarlo correctamente. El resultado es que todo está mezclado en la lista (si vuelvo a hacer clic en el botón para hacerlo visible). Pero de nuevo si cambio el tamaño de la ventana ahora (el confuso jCarousel NO está oculto ahora), se vuelve a dibujar correctamente.

Intenté obtener la instancia de jCarousel y volver a cargarla tan pronto como se hace clic en el botón para hacer que el div sea visible (la forma en que se cambia el tamaño cuando es visible y se cambia el tamaño de la ventana).

Para obtener el jCarousel, estoy usando:

JQuery('#mycarousel').data('jcarousel') 

y se devuelve como nulo.

¿Cómo puedo hacer que el jCarousel dibuje correctamente?

Answer 1

Poco más de depuración y descubrí que cuando el navegador se redimensiona (y el carrusel ya está visible), se llama a su función de recarga para ajustar su posición, así que para ayudarme en el escenario hide/show div, terminé llamando al la función de recarga de api de carrusel después de que el div de envoltura se vuelve visible.

un poco de esfuerzo fue realmente agarrar la instancia jcarousel. lo que fue un proceso de dos pasos ...

1. controlar la instancia carrusel.

   var cInstance = null; 
   cInitCallback = function(c){ 
       cInstance = c; 
   }; 
   
   $('#mycarousel').jcarousel({ 
        initCallback: cInitCallback, 
   
       }); 
   

2. recargar el carrusel en el programa de la div

   cInstance.reload(); 
   

Answer 2

¿Qué hace que asuma que la llamada $().jcarousel() hace cualquier cosa con .data()? Es mejor seguir con la API proporcionada por el complemento de todos modos, en lugar de adivinar cómo funciona bajo el capó. De todos modos, para responder a su pregunta ...

El problema es que, cuando un div está oculto, no tiene alto o ancho. Utilizar la "técnica-off a la izquierda" en vez de ocultar el div, así:

#mycarousel { 
    height: 100px; /* whatever height your div will have when shown */ 
    width: 100px; /* whatever width your div will have when shown */ 
    position: absolute: 
    left: -10000px; 
} 

Cuando se quiera mostrar, utilizar $('#mycarousel').css('position', 'static') para eliminar el posicionamiento absoluto y el div saltará en su lugar.

Un poco más información here.