jquery - bxslider jquery 插件中的视口(viewport)高度设置不正确

Question

我正在开发 bx slider jquery 插件。有时视口(viewport)高度设置不正确。当 slider 第一次加载时会发生这种情况。如果我在正确设置视口(viewport)后单击下一个或上一个按钮。我还 checkin 了 bxSlider.js，它也会返回错误的值。这表明只有一个子项(图像)，但我使用 5 张图像。我将宽度设置为 250 px，但它返回 953px..我使用了以下插件。

https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css http://bxslider.com/js/jquery.min.js https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.js https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.fitvids.js https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/vendor/jquery.easing.1.3.js

Answer 1

如果页面加载方式发生变化，例如添加额外的插件，bxSlider 将无法完成其计算，并且在重新绘制之前不会完成计算。通常通过使 bxSlider 移动下一个或上一个来完成。我通过强制 bxSlider 在加载时重新计算来修复此行为。这里有两个建议，第一个是被动的和最小的，第二个是激进的和过度的。我建议单独尝试第一个，如果不起作用，请一起使用它们。

修复#1。将以下规则集添加到样式表底部或 <style> 的最后一行 block :

.bx-viewport.bx-viewport { min-height: 90vh !important; }

在类选择器上加倍可能看起来很奇怪，但它会增加选择器的选择性，!important和双选择器一样是可选的。这是修复#1的要点:

.bx-viewport { min-height: 90vh; }

修复#2。将此 JS 放在结束符之前 </body>标签:

document.documentElement.addEventListener('DOMContentLoaded', function(event)  {
    var $tgt = $('.bx-viewport')[0];
    var tgt = document.querySelector('.bx-viewport');
    tgt.style.height = ""
    tgt.removeAttribute('height');
    tgt.style.removeProperty('height');
    $tgt.css('height', '');
    $tgt.removeAttr('height');

}, false);

大多数时候使用修复#1就足够了。 修复 #2 有点过分，但它总是有效。