javascript - WooCommerce 标签不显示 slider

Question

所以我已经建立了一个 WooCommerce 产品页面。在页面底部，有默认的 WooCommerce 选项卡，我将其标记为“概览”、“图库”等。

当我单击图库选项卡时，该页面上有使用 WooSlider 显示 slider 的短代码。

问题在于 WooSlider(以及大多数 slider )使用页面宽度/高度来显示自身，并且由于图库选项卡已关闭(内容隐藏)，当您选择它时， slider 不会出现。

当您在选择图库选项卡的情况下调整浏览器窗口的大小时，它可以自行显示，因为该选项卡现在可见并且可以正确显示。

Google 上有很多关于此问题的帖子，但我无法实现任何修复，尤其是因为我不太精通 jquery(许多解决方案需要 WooSlider jquery 的模组)。

任何有这方面经验的人都可以帮助我让它工作吗？

谢谢!

Answer 1

寻找

.wooslider.wooslider-type-posts img, body .wooslider.wooslider-type-attachments img

并添加此样式:

.wooslider.wooslider-type-posts img, 
body .wooslider.wooslider-type-attachments img{
height: auto; min-width: 100vw;
} 

基本上，我们告诉 WooSlider 获取图像视口(viewport)的最大可用宽度，然后自动缩放高度