bxSlider dentro de show / hide divs

El contenido de mi página se alterna usando diferentes enlaces, mostrando un div a la vez usando una función jQuery ‘showonlyone’. Al cargar la página, no se debe mostrar ninguno de los divs. Lo conseguí funcionando bien, hasta que traté de poner un control deslizante de imagen (bxSlider) dentro de uno de los divs, newboxes1 .

Fuera de la caja, el bxSlider funciona bien. Dentro de él, las imágenes no se muestran. Ver ejemplo en vivo aquí .

Así es como se ve mi código:

    function showonlyone(thechosenone) { $('.newboxes').each(function(index) { if ($(this).attr("id") == thechosenone) { $(this).show(); } else { $(this).hide(); } }); }     $(document).ready(function(){ $(function(){ var slider = $('#slidersample').bxSlider({ mode:'fade', controls: false }); $('#bx-prev-sample').click(function(){ slider.goToPreviousSlide(); return false; }); $('#hover-next-g-sample').click(function(){ slider.goToPreviousSlide(); return false; }); $('#bx-next-sample').click(function(){ slider.goToNextSlide(); return false; }); $('#hover-next-d-sample').click(function(){ slider.goToNextSlide(); return false; }); }); });     
DIV 1
DIV 2
DIV 3

yo suelo

 .newboxes {display:none;} 

en CSS, por lo que ninguno de los divs se muestra cuando la página se está cargando. Eliminar esto del CSS resuelve el problema bxSlider, como puede ver aquí . Sin embargo, el contenido se muestra cuando se carga la página, mientras que quiero que todo esté oculto. Cualquier bash de usar la display:block o display:none en display:none otra parte del código ha sido infructuoso.

¿Alguien puede pensar en una forma de solucionar esto? Gracias.

Tuve el mismo problema con el complemento bxSlider: cuando el DIV que lo contenía estaba inicialmente oculto, display:none , la presentación de diapositivas no aparecería cuando hiciera visible el DIV $('#div-id').show(); . Solo aparecieron los botones de control de la presentación. Entonces resolví el problema así:

  

Como puede ver, volví a cargar la presentación de diapositivas justo después de que se mostró el DIV (que contiene el control deslizante) y funcionó perfectamente. Tal vez eso pueda ayudar a resolver sus problemas y evitar el uso de la visibilidad: trucos ocultos y otros.

Sé que esta pregunta fue hecha hace un tiempo, pero tengo el mismo problema. No tengo idea de lo que pasa con bxSlider y la pantalla: ninguno. No parece leer el contenido si está contenido en un div con la pantalla configurada en none.

Hasta ahora lo he superado al alternar la visibility:hidden y visibility:visible lugar de mostrar.

Puede usar visibilidad: oculta y visibilidad: visible, pero tendrá algunos problemas. Y puede usar height: 0px; overflow: hidden; Soy el último uso de resolver

Otra solución sería permitir que bxslider cargue, y luego ocultarlo una vez que lo haya hecho.