jQuery bxslider 在加载时计算错误的视口大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13722282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bxslider calculating wrong viewport size on load
提问by Matija Milkovi?
Anyway I recently started using bxslider and I'm having an issue with it.
无论如何，我最近开始使用 bxslider，但遇到了问题。
It seems to calculate its viewport size wrongly on page load, which means it doesn't work well on mobile devices, tablets etc.
它似乎在页面加载时错误地计算了其视口大小，这意味着它在移动设备、平板电脑等上不能很好地工作。
The weird thing is, when I resize the window of the browser(even just for a pixel) the viewport height gets calculated correctly and everything looks fine. But if I refreshed the page with same height and width bx-viewport wouldn't be correctly calculated.
奇怪的是，当我调整浏览器窗口的大小（即使只是一个像素）时，视口高度得到正确计算，一切看起来都很好。但是，如果我以相同的高度和宽度刷新页面，则无法正确计算 bx-viewport。
Any idea why this is happening?
知道为什么会这样吗？
HTML looks something like this(and yeah I'm aware that it probably hasn't got anything to do with it, but still):
HTML 看起来像这样（是的，我知道它可能与它无关，但仍然如此）：
<ul class="seminars-slider">
<li>
<article class="education-article">
<h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
<p>LOL1</p>
<div class="buttons">
<a href="#" class="book-button"><span>Book now</span></a>
<a href="#" class="read-more"><span>Read more</span></a>
</div>
<div class="clearall"></div>
</article>
<div class="clearall"></div>
</li>
// same li
<li>
<article class="education-article">
<h3><a href="#"> Sit tincidunt eros massa, lundium ultrices, sit in aliquet velit</a></h3>
<p>LOL1</p>
<div class="buttons">
<a href="#" class="book-button"><span>Book now</span></a>
<a href="#" class="read-more"><span>Read more</span></a>
</div>
<div class="clearall"></div>
</article>
<div class="clearall"></div>
</li>
</ul>
js call looks like:
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();
});
Thanks.
谢谢。
回答by Fernando Lujan
It could be that you're calling the bxSlider function too early. If you're invoking it from
可能是您过早地调用 bxSlider 函数。如果您从
$(document).ready(function() { ... });
$(document).ready(function() { ... });
consider instead using
考虑改为使用
$(window).load(function() { ... });
$(window).load(function() { ... });
The difference between using those two functions is that (document).ready waits until the DOM has been shown to the user in it's initial state, whereas (window).load actually waits until all resources have been loaded onto the DOM.
使用这两个函数的区别在于 (document).ready 等待 DOM 以初始状态显示给用户，而 (window).load 实际上等待所有资源都加载到 DOM 上。
回答by gokul bs
You can use
您可以使用
slider=jQuery('.seminars-slider').bxSlider({
mode: 'vertical',
controls:false,
pager:false,
minSlides:2,
maxSlides:2,
moveSlides:1
});
setTimeout(function(){
slider.redrawSlider();
},100);
回答by Matthew Watson
"romelmederos" on the bxslider github page suggested;
建议使用 bxslider github 页面上的“romelmederos”；
"BxSlider v4.1 - Having issues with the rendering of the slider since I am using percentages for the height in a responsive web site for mobile.
“BxSlider v4.1 - 由于我在移动响应式网站中使用百分比表示高度，因此出现了滑块渲染问题。
So I had to make the change from: slider.viewport.css('height', getViewportHeight()); to this: slider.viewport.css('height', '');
所以我不得不改变：slider.viewport.css('height', getViewportHeight()); 对此：slider.viewport.css('height', '');
I altered the plugin with an option instead in my copy, but the quickest way to change is by modifying the line above"
我在我的副本中使用一个选项更改了插件，但最快的更改方法是修改上面的行”
I edited my jquery.bxslider.js on line 1290; This worked great for me and seems a better solution than window.load, (with window.load the slider was busted until everything loaded.)
我在第 1290 行编辑了 jquery.bxslider.js；这对我来说非常有用，并且似乎是比 window.load 更好的解决方案，（使用 window.load 滑块被破坏，直到所有内容都加载完毕。）
回答by diynevala
If you are loading the <ul>element with ajax and it contains images, try slider.reloadSlider();after the load. First I used
如果您<ul>使用 ajax加载元素并且它包含图像，请slider.reloadSlider();在加载后尝试。首先我用
setTimeout('slider.reloadSlider()',1000);
to wait for the images to load, but eventually I switched to the nice library ImagesLoadedthat will wait for the images to load:
等待图像加载，但最终我切换到漂亮的库ImagesLoaded，它将等待图像加载：
imagesLoaded('.seminars-slider', function() {
slider.reloadSlider();
});
(changed the variable-names to match those of the question)
（更改变量名称以匹配问题的名称）
回答by MeanMatt
Matthew Watson gave me a good idea and I went into the plugin and updated the actual getViewPortHeight() function like so :
Matthew Watson 给了我一个好主意，我进入了插件并更新了实际的 getViewPortHeight() 函数，如下所示：
var getViewportHeight = function(){
var height = 0;
children = slider.children;
height = jQuery(slider.children[0]).height();;
return height;
}
So now it is taking the height of the first image in there (hopefully they are all the same…) and using that to determine the height of the slider. Please note, your controls will still sit below the slider, but this can be fixed with css positioning etc.
所以现在它正在那里获取第一张图像的高度（希望它们都是一样的......）并使用它来确定滑块的高度。请注意，您的控件仍将位于滑块下方，但这可以通过 css 定位等解决。
Hope this helps some lost folks out there.
希望这可以帮助一些迷路的人。
回答by Jones MacNismond
Found a solution for this safari bug. You have to have the mode of the slider at horizontal (not sure if vertical works too but the fade is not working at all). Then you have to get the height of the first image and pass it to the ".bx-viewport". here is how my script looks like:
找到了这个 safari 错误的解决方案。您必须将滑块的模式设置为水平（不确定垂直是否也有效，但淡入淡出根本不起作用）。然后你必须获得第一张图像的高度并将其传递给“.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 );
});
