bxSlider within show/hide divs

My page's content is toggled using different links, showing one div at a time using a jQuery 'showonlyone' function. On loading the page, none of the divs should be displayed. I got it working fine, until i tried to put a picture slider (bxSlider) within one of the divs, newboxes1.

Outside the box, the bxSlider works fine. Within it, the pictures don't show. See live example here.

Here's what my code looks like :

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

I use

.newboxes {display:none;}

in the CSS so none of the divs are showing when the page is loading. Removing this from the CSS solves the bxSlider issue, as you can see here. However, the content is shown when the page is loaded, while I want all of it to be hidden. Any attempt to use display:block or display:none elsewhere in the code has been unsuccessful.

Can anyone think of a way to fix this? Thank you.

sh0ne

I had the similar problem with bxSlider plugin: when the DIV that contained it was initially hidden display:none, the slideshow would not appear when I make the DIV visible $('#div-id').show();. Only slideshow control buttons appeared. Then I solved the problem like this:

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

As you can see I reloaded the slideshow just after the DIV (that contain the slider) was showed and it worked perfectly. Maybe that can help to solve your problems and to avoid using visibility:hidden and other tricks.

I know this question was asked awhile ago but I have the same issue. I have no idea whats up with bxSlider and display:none. It doesn't seem to read the content if its contained in a div with the display set to none.

I've gotten around it thus far by toggling visibility:hidden and visibility:visible instead of display.

You can use visibility:hidden and visibility:visible, but will some troubles. And you can use height:0px;overflow:hidden; I`m use last solve

eightdotthree

Another solution would be to allow bxslider to load, then hide it once it has.

<script>
    var mySlider;

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

来源：https://stackoverflow.com/questions/11071269/bxslider-within-show-hide-divs

标签

javascript

jquery

html

bxslider