bxslider在加载时计算错误的视口大小

无论如何，我最近开始使用bxslider，我遇到了问题。

它似乎在页面加载时错误地计算了它的视口大小，这意味着它在移动设备，平板电脑等上不能正常工作。

奇怪的是，当我调整浏览器窗口的大小（即使只是一个像素）时，视口高度得到正确计算，一切看起来都很好。 但是如果我刷新具有相同高度和宽度的页面，则无法正确计算bx-viewport。

知道为什么会这样吗？

HTML看起来像这样（是的，我知道它可能与它没有任何关系，但仍然）：

 
 
 
 Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit
 
LOL1
 
 Book now Read more 
 
 
 
 
 // same li 
 
 
 Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit
 
LOL1
 
 Book now Read more 
 
 
 
 
  

js调用看起来像：

 slider=jQuery('.seminars-slider').bxSlider({ mode: 'vertical', controls:false, pager:false, minSlides:2, maxSlides:2, moveSlides:1 }); jQuery('.up-control').click(function() { slider.goToNextSlide(); }); jQuery('.down-control').click(function() { slider.goToPrevSlide(); }); 

谢谢。

Answer 1

可能是你太早调用bxSlider函数。 如果你从中调用它

$(document).ready(function() { ... });

考虑改为使用

$(window).load(function() { ... });

使用这两个函数之间的区别在于（document）.ready等待DOM向用户显示初始状态，而（window）。load实际上等待直到所有资源都加载到DOM上。

Answer 2

您可以使用

 slider=jQuery('.seminars-slider').bxSlider({ mode: 'vertical', controls:false, pager:false, minSlides:2, maxSlides:2, moveSlides:1 }); setTimeout(function(){ slider.redrawSlider(); },100); 

Answer 3

bxslider github页面上的“romelmederos”建议;

---

“BxSlider v4.1 – 由于我在移动设备的响应式网站中使用高度百分比，因此存在滑块渲染问题。

所以我不得不改变：slider.viewport.css（’height’，getViewportHeight（））; 对此：slider.viewport.css（’height’，”）;

我在我的副本中使用选项更改了插件，但更改的最快方法是修改上面的行“

---

我在1290行编辑了我的jquery.bxslider.js; 这对我来说很有用，似乎比window.load更好的解决方案（使用window.load滑块被破坏，直到所有内容都被加载。）

Answer 4

如果要使用ajax加载

元素并且它包含图像，请尝试使用slider.reloadSlider(); 负载后。 我先用过

 setTimeout('slider.reloadSlider()',1000); 

等待图像加载，但最终我切换到将等待图像加载的好库ImagesLoaded ：

 imagesLoaded('.seminars-slider', function() { slider.reloadSlider(); }); 

（更改了变量名以匹配问题的那些）

Answer 5

Matthew Watson给了我一个好主意，我进入了插件并更新了实际的getViewPortHeight（）函数，如下所示：

 var getViewportHeight = function(){ var height = 0; children = slider.children; height = jQuery(slider.children[0]).height();; return height; } 

所以现在它取第一张图像的高度（希望它们都是一样的……）并用它来确定滑块的高度。 请注意，您的控件仍然位于滑块下方，但可以使用css定位等进行修复。

希望这能帮助一些失去的人。

Answer 6

找到了这个safari bug的解决方案。 您必须将滑块的模式设置为水平（不确定垂直是否也有效，但淡入淡出根本不起作用）。 然后你必须获得第一个图像的高度并将其传递给“.bx-viewport”。 这是我的脚本的样子：

 $( "img.Banner" ).attr( "id", "first-slide" ); $('.bxslider').bxSlider({ adaptiveHeight: true, mode: 'horizontal', auto: true }); $("#first-slide").load(function(){ var height = $(this).height(); $( ".bx-viewport" ).css( "height", height ); });