bxSlider all'interno mostra/nascondi divs

Il contenuto della mia pagina viene attivato utilizzando diversi collegamenti, mostrando uno div alla volta utilizzando la funzione 'showonlyone' di jQuery. Durante il caricamento della pagina, nessuno dei div deve essere visualizzato. Ho funzionato bene, fino a quando ho provato a mettere un cursore di immagine (bxSlider) all'interno di uno dei div, newboxes1.bxSlider all'interno mostra/nascondi divs

Fuori dalla scatola, il bxSlider funziona correttamente. Al suo interno, le immagini non mostrano. Guarda l'esempio dal vivo here.

Ecco ciò che il mio codice è simile:

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

Io uso

.newboxes {display:none;}

nel CSS in modo da nessuno dei div stanno mostrando quando la pagina viene caricata. Rimuovendo questo dal CSS risolve il problema bxSlider, come potete vedere here. Tuttavia, il contenuto viene mostrato quando la pagina viene caricata, mentre io voglio che tutto sia nascosto. Qualsiasi tentativo di utilizzare display:block o display:none altrove nel codice non è riuscito.

Qualcuno può pensare a un modo per risolvere questo problema? Grazie.

fonte

2012-06-17 user1461763

So che questa domanda è stata richiesta un po 'di tempo fa ma ho lo stesso problema. Non ho idea di cosa succede con bxSlider e display: nessuno. Non sembra leggere il contenuto se è contenuto in un div con il display impostato su none.

Ho girato fino ad ora spostando visibility:hidden e visibility:visible invece di visualizzare.

fonte

2012-08-17 15:58:29 unsunghero

Questa è stata un'ottima soluzione. Grazie per l'idea !! –

Ho avuto il problema simile con il plugin bxSlider: quando il DIV che lo conteneva era inizialmente nascosto display:none, la presentazione non compariva quando rendevo visibile il DIV $('#div-id').show();. Sono comparsi solo i pulsanti di controllo delle presentazioni. Poi ho risolto il problema in questo modo:

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

Come potete vedere ho ricaricato la presentazione subito dopo DIV (che contiene il dispositivo di scorrimento) è stato mostrato e ha funzionato perfettamente. Forse questo può aiutare a risolvere i tuoi problemi e ad evitare l'uso della visibilità: trucchi nascosti e altri.

fonte

2012-09-04 07:55:13 sh0ne

Ottima risposta - nota che l'ultima versione del cursore BX la funzione è reloadSlider() non reloadShow() – rentageekmom

Se non avessi più un puntatore a mySlider? o se voglio ricaricare tutte le diapositive con qualche classe CSS? $ ('. bxslider'). reloadSlider() non funziona –

non funziona per me: Uncaught TypeError: slider.reloadSlider non è una funzione –

È possibile utilizzare la visibilità: nascosta e visibilità: visibile, ma presenta alcuni problemi. E puoi usare height: 0px; overflow: hidden; I`m uso ultima soluzione

fonte

2014-04-10 14:00:33 user3519817

Un'altra soluzione sarebbe quella di consentire a bxslider di caricare, quindi nasconderlo una volta che ha.

<script> 
    var mySlider; 

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

fonte

2014-06-24 17:57:20 eightdotthree

questo non funziona per me, risultati esattamente la stessa cosa che accade. –

Questo funziona meglio per me – tosin

bxSlider all'interno mostra/nascondi divs

risposta

Problemi correlati