bxSlider w obrębie show/hide divs

Zawartość mojej strony jest przełączana za pomocą różnych linków, wyświetlając jeden numer div za pomocą funkcji "showonlyone" jQuery. Po wczytaniu strony żaden z elementów div nie powinien być wyświetlany. Rozumiem, że działa dobrze, dopóki nie spróbowałem umieścić suwaka obrazu (bxSlider) w jednym z elementów div, newboxes1.bxSlider w obrębie show/hide divs

Poza boksem, bxSlider działa dobrze. Wewnątrz zdjęcia nie pokazują się. Zobacz przykład na żywo: here.

Oto co mój kod wygląda następująco:

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

używam

.newboxes {display:none;}

w CSS więc żaden z div są wykazujące, gdy strona się ładuje. Usunięcie tego z CSS rozwiązuje problem bxSlider, jak widać here. Jednak zawartość jest wyświetlana po załadowaniu strony, a ja chcę, aby wszystkie były ukryte. Każda próba użycia display:block lub display:none w innym miejscu kodu zakończyła się niepowodzeniem.

Czy ktoś może wymyślić sposób, aby to naprawić? Dziękuję Ci.

Źródło

2012-06-17 user1461763

Wiem, że to pytanie zostało zadane jakiś czas temu, ale mam ten sam problem. Nie mam pojęcia, co słychać w bxSlider i display: none. Wydaje się, że nie odczytuje zawartości, jeśli jej zawarta w div z wyświetlaczem jest ustawiona na none.

Zrobiłem to do tej pory, przełączając visibility:hidden i visibility:visible zamiast wyświetlacza.

Źródło

2012-08-17 15:58:29 unsunghero

To było świetne rozwiązanie. Dzięki za pomysł !! –

Miałem podobny problem z pluginem bxSlider: gdy DIV, który go zawierał początkowo ukryty display:none, pokaz slajdów nie pojawiają się, gdy robię DIV widoczne $('#div-id').show();. Pojawiły się tylko przyciski sterowania pokazem slajdów. Potem rozwiązał problem tak:

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

Jak widać ja przeładował pokaz tuż po DIV (które zawierają suwak) Wykazano, i to działało idealnie. Może to pomoże rozwiązać twoje problemy i uniknąć użycia widoczności: ukrytych i innych sztuczek.

Źródło

2012-09-04 07:55:13 sh0ne

Świetna odpowiedź - zauważ, że najnowsza wersja suwaka BX to funkcja reloadSlider() not reloadShow() – rentageekmom

Jeśli nie mam już wskaźnika do mySlider? lub jeśli chcę przeładować wszystkie slajdy z jakąś klasą css? $ ('. bxslider'). reloadSlider() nie działa –

nie działa dla mnie: Uncaught TypeError: slider.reloadSlider nie jest funkcją –

Możesz użyć widoczności: ukryta i widoczność: widoczna, ale spowoduje pewne problemy. I możesz użyć wysokości: 0px; przepełnienie: ukryte; Używam ostatniego rozwiązania

Źródło

2014-04-10 14:00:33 user3519817

Innym rozwiązaniem byłoby zezwolenie bxslider na załadowanie, a następnie ukrycie go, gdy już się pojawi.

<script> 
    var mySlider; 

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

Źródło

2014-06-24 17:57:20 eightdotthree

to nie działa dla mnie, powoduje dokładnie to samo dzieje się. –

To działa najlepiej dla mnie – tosin

bxSlider w obrębie show/hide divs

Odpowiedz

Powiązane problemy