Javascript 在显示以前隐藏的div时重新加载bxSlider

bxSlider有一个函数，可以在特定操作中重新加载滑块。我以以下方式初始化页面上的多个滑块：

jQuery('.product_carousel_images').each(function(index,item) {

    jQuery(item).bxSlider({
        mode: 'fade',
        speed: 600,
        pause: 7000,
        auto: false,
        controls: false,
        pager: true,
        pagerCustom: '.product_carousel_pager'
    });

});

使用jQuery easytabs进行选项卡布局时，第一个滑块位于第一个（即可见）选项卡中，工作正常，而第二个滑块在初始隐藏的div中生成。由于bxSlider将div中滑块的高度设置为display:none为0，因此第二个滑块的图像高度为零。可见性：隐藏不是一个选项，因为选项卡界面不允许这样做。

---

使用此多滑块功能，如何在特定操作（如单击选项卡标题）上触发滑块的重新加载？

我自己不使用bxSlider，但我猜您可以使用bxSlider的“重新加载滑块”功能

只需在初始化时保留对滑块的引用，然后在每次更改选项卡时对其调用reloadSlider，在使用easy tabs时，必须使用easytabs:after事件

var slider = jQuery(item).bxSlider({
    mode: 'fade',
    speed: 600,
    pause: 7000,
    auto: false,
    controls: false,
    pager: true,
    pagerCustom: '.product_carousel_pager'
});
// Reload slider whenever tab changes
$('#your-tabs-container').bind('easytabs:after', function() {
    // TODO identify the displayed tab using EasyTabs target panel parameters in order not to reload bxSlider when the wrong tab is displayed
    slider.reloadSlider();
});

有关EasyTabs事件挂钩的更多信息，请参见：

---

尝试将此添加到CSS

.bx视口{min height:90vh；}

根据需要进行调整。@zer00ne不幸的是，这并不是那么容易：（.在大屏幕上，高度非常混乱（由于90%的视口），在较小的位置上，它可能工作得更好，但将视口高度设置为条件可能只会导致问题，对吗？根据需要进行调整，关键是如果在

上设置
min height
。bx viewport

，bxSlider将遵守该高度。这适用于加载、重新加载、调整大小等情况。如果将其设置为较小的大小，例如200px，它本来是0，它将是200px，持续一秒钟，然后扩展到它的内容高度。好吧，由于网站是响应性的，我没有一个固定的高度/分钟高度，我可以在本地分配。不幸的是，bxslider接受最小高度，但不会扩展。我相信内联CSS规则在页面加载时会应用，一个从那时起，nd通过CSS给出了例如200px的高度，它不会看得更远，并相应地应用其宽度。参见更新的回答。我已经走了这条路，但它仍然没有实际重新加载旋转木马。我相信这是由于每个功能的缘故，因为我在第一个和最后一个选项卡上都有一个旋转木马。我使用class.tabs作为旋转木马el容器而不是ID。您确实需要为每个滑块保留一个引用并重新加载每个滑块