显示/隐藏div内的bxSlider

我的页面内容使用不同的链接切换，每次显示一个div使用jQuery'showonlyone'函数。在加载页面时，不应显示任何div。我得到它工作正常，直到我试图把一个图片滑块（bxSlider）内的其中一个div，newboxes1。显示/隐藏div内的bxSlider

在箱子外面，bxSlider工作正常。在其中，图片不显示。看到现场示例here。

这里是我的代码如下所示：

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

我在CSS所以没有的div的页面加载时，为表示将使用

.newboxes {display:none;}

。从CSS中移除此问题解决了bxSlider问题，您可以看到here。但是，页面加载时会显示内容，而我希望隐藏所有内容。任何在代码中其他地方使用display:block或display:none的尝试都不成功。

任何人都可以想出一种方法来解决这个问题吗？谢谢。

来源

2012-06-17 user1461763

我知道这个问题曾被问过，但我有同样的问题。我不知道什么与bxSlider和显示：无。它似乎没有阅读内容，如果它包含在显示设置为无的div中。

我到目前为止通过切换visibility:hidden和visibility:visible而不是显示。

来源

2012-08-17 15:58:29 unsunghero

这是一个很好的解决方案。感谢您的想法！ –

我有与bxSlider插件类似的问题：当包含它的DIV最初隐藏display:none，当我使DIV可见$('#div-id').show();时不会出现幻灯片。只出现幻灯片控制按钮。然后，我解决了这样的问题：

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

正如你可以看到我重新加载幻灯片只是的DIV（包含滑块）的表现后，它完美地工作。也许这可以帮助解决您的问题，并避免使用可见性：隐藏和其他技巧。

来源

2012-09-04 07:55:13 sh0ne

好的答案 - 请注意，最新的BX滑块版本的函数是reloadSlider（）而不是reloadShow（） – rentageekmom

如果我没有指向mySlider的指针了？或者如果我想重新加载所有幻灯片与一些CSS类？ $（'。bxslider'）。reloadSlider（）不起作用 –

不适用于我：Uncaught TypeError：slider.reloadSlider不是函数 –

您可以使用可见性：隐藏和可见性：可见，但会有一些麻烦。你可以使用height：0px; overflow：hidden; 我最后解决的问题

来源

2014-04-10 14:00:33 user3519817

另一个解决方案是允许bxslider加载，然后在隐藏它之后隐藏它。

<script> 
    var mySlider; 

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

来源

2014-06-24 17:57:20 eightdotthree

这不适用于我，导致完全相同的事情发生。 –

这对我最适合 – tosin

显示/隐藏div内的bxSlider

回答

相关问题