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

Question

我正在开发 bx 滑块 jquery 插件。有时视口高度设置不正确。这将在第一次加载滑块时发生。如果我在设置视口后单击下一个或上一个按钮 correctly.I 也检查了 bxSlider.js，它也会 return 错误 value.That 显示只有一张 children(图片)，但我使用了 5 张图片。我将宽度设置为 250 px，但它 returns 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 移动 next 或 prev 来完成。我通过强制 bxSlider 在加载时重新计算来修复此行为。这里有两个建议，第一个是被动的和最小的，第二个是激进的和过度的。我建议单独尝试第一个，如果它不起作用，请同时使用它们。

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

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

在 class 选择器上加倍可能看起来很奇怪，但它会增加选择器的选择性，!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 就足够了。 修复 #2 过分但它始终有效。

Answer 2

如果您尝试更改 bxslider，您会在下一行看到高度

in this line set height inline so you try to set your slider image height first. or you can try to change using javascript

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

Viewport height is not setting correctly in bxslider jquery plugin

jquery

bxslider