bxSlider dentro de show/hide divs

El contenido de mi página se alterna usando diferentes enlaces, mostrando uno 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.bxSlider dentro de show/hide divs

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

Esto es lo que se ve mi código como:

<head> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">           
function showonlyone(thechosenone) { 
    $('.newboxes').each(function(index) { 
      if ($(this).attr("id") == thechosenone) { 
       $(this).show(); 
      } 
      else { 
       $(this).hide(); 
      } 
    }); 
}</script> 
</script> 


<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
<script src="jquery.bxSlider.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(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; 
    }); 
}); 
}); 
</script> 
</head> 


<body> 
<div id="left-menu"> 
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >LINK 1</a><br /> 
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >LINK 2</a><br /> 
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >LINK 3</a> 
</div> 

<div class="newboxes" id="newboxes1">DIV 1 
<!-- SLIDER --> 
<div id="slider" style="margin-top: 0px; width="580 px"; height="375 px"> 
<div class="bx-prev"><div id="bx-prev-sample">←</div></div> 
<div class="bx-next"><div id="bx-next-sample">→</div></div> 
<div class= "hover-next-g"><div id="hover-next-g-sample" style="height:100%; width:100%"></div></div> 
<div class= "hover-next-d"><div id="hover-next-d-sample" style="height:100%; width:100%"></div></div> 
<ul id="slidersample" width="580px" height="375 px" style="margin:0px ; padding:0px"> 
    <li><img src="images/1.jpg" width="580" height="375" /></li> 
    <li><img src="images/2.jpg" width="580" height="375" /></li> 
    <li><img src="images/3.jpg" width="580" height="375" /></li> 
</ul> 
</div> 
<!-- SLIDER END--> 
</div> 

<div class="newboxes" id="newboxes2">DIV 2<br /></div> 

<div class="newboxes" id="newboxes3">DIV 3</div> 

</body> 
</html>

utilizo

.newboxes {display:none;}

en el CSS por lo que ninguno de los divs están mostrando cuando se carga la página. Al eliminar esto del CSS se resuelve el problema bxSlider, como puede ver here. Sin embargo, el contenido se muestra cuando se carga la página, mientras que quiero que todo esté oculto. Cualquier intento de usar display:block o display:none en otro lugar del código ha sido infructuoso.

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

Fuente

2012-06-17 user1461763

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.

He estado al tanto hasta ahora al alternar visibility:hidden y visibility:visible en lugar de mostrar.

Fuente

2012-08-17 15:58:29 unsunghero

Esta fue una gran solución. ¡Gracias por la idea! –

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 visualice el DIV $('#div-id').show();. Solo aparecieron los botones de control de la presentación. A continuación, he resuelto el problema de la siguiente manera:

<script> 

var mySlider; 

$(function() { 

    mySlider = $('#slider').bxSlider({ 
      easing: 'easeInCubic', 
      displaySlideQty: 3, 
      moveSlideQty: 1, 
      infiniteLoop: false, 
      hideControlOnEnd: true 
    }); 

    $("#processSignUp").click(function() { // button that sets the DIV visible 
     $("#trainings-slide").show();  // DIV that contain SLIDER 
     mySlider.reloadSlider();  // Reloads the slideshow (bxSlider API function) 
    }); 

}); 

</script>

Como se puede ver la presentación de diapositivas Recargué justo después de 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.

Fuente

2012-09-04 07:55:13 sh0ne

Gran respuesta: tenga en cuenta que la última versión del control deslizante BX la función es reloadSlider() no reloadShow() – rentageekmom

¿Si ya no tengo un puntero a mySlider? o si quiero volver a cargar todas las diapositivas con alguna clase de CSS? $ ('. bxslider'). reloadSlider() no funciona –

no funciona para mí: UnEdge TypeError: slider.reloadSlider no es una función –

Puede utilizar la visibilidad: oculta y la visibilidad: visible, pero algunos problemas. Y puede usar height: 0px; overflow: hidden; Yo uso última resolución

Fuente

2014-04-10 14:00:33 user3519817

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

<script> 
    var mySlider; 

    $(function() { 
     mySlider = $('#slider').bxSlider({ 
      easing: 'easeInCubic', 
      displaySlideQty: 3, 
      moveSlideQty: 1, 
      infiniteLoop: false, 
      hideControlOnEnd: true, 
      onSliderLoad: function() { 
       $('#trainings-slide').hide(); 
      } 
     }); 
    }); 
</script>

Fuente

2014-06-24 17:57:20 eightdotthree

Esto no funciona para mí, resulta exactamente lo mismo que sucede. –

Esto funciona mejor para mí – tosin

bxSlider dentro de show/hide divs

Respuesta

Cuestiones relacionadas