javascript - BX Slider 不会在浏览器窗口大小减小时重新计算宽度

Question

我有一个网站，它使用了令人惊叹且响应迅速的 BX Slider。一切正常，除非浏览器窗口向下调整大小时，BX Slider <li>不会重新计算宽度。

我的开发站点是 lc.westguardsolutions.com/#work , 请随意浏览代码。

如果页面以小宽度加载然后增加，BX Slider 宽度会正确重新计算，但当它减少时则不会。

如有任何帮助，我们将不胜感激。

谢谢!

Answer 1

解决这个问题，我办公室的另一个开发人员帮我调试了这个，看起来我们找到了解决方案。

BX Slider 计算单个 slider 尺寸的方式是对父 slider 进行测量。由于幻灯片彼此相邻排列而导致父项很大，因此测量的“if”语句告诉 slider 它已经小于该测量值，并且不会调整为更小。实际上， slider 应该只测量实际的浏览器宽度以进行计算，但这是关于 BX Slider 的作者用来测量和应用响应能力的逻辑稳定性的更广泛讨论的一部分。

解决此问题的方法是在 BX Slider 初始化中应用“淡入淡出”模式 mode: 'fade'。这样做的原因是，在“淡入淡出”模式下，幻灯片不会彼此相邻排列，并且 overflow: hidden'd，它们堆叠在彼此之上并一次显示一张时间。因此，容器 div 的大小调整正确并且 BX Slider 计算正确。

我希望作者看到这一点并找到一种方法来实现修复，因为我没有资格，同时如果你有这个，请使用 mode: 'fade' 作为 polyfill问题。

希望这对其他人有帮助!