bxslider jquery 插件中的视口高度设置不正确

Question

我正在开发 bx 滑块 jquery 插件。有时视口高度设置不正确。这将在第一次加载滑块时发生。如果我在正确设置视口后单击下一个或上一个按钮。我还检查了 bxSlider.js，它也会返回错误的值。这表明只有一个孩子（图像），但我使用 5 张图片。我将宽度设置为 250 像素，但它返回 953 像素。我使用了以下插件。

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.jshttps://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，您会在以下行中看到高度

在这一行中设置高度内联，因此您首先尝试设置滑块图像高度。 或者您可以尝试使用 javascript 进行更改

Answer 2

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

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

.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);

大部分时间使用 Fix #1 就足够了。 Fix #2 太过分了，但它总是有效。