Question

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，因此第二个滑块具有零高度图像。可见性：隐藏不是一个选项，因为选项卡界面不允许这样做。使用此多重滑块功能，如何在特定操作上触发重新加载滑块，例如单击标签页？

Answer 1

我自己不使用bxSlider，但我猜你可以使用bxSlider的“reloadSlider”函数。

http://bxslider.com/examples/reload-slider

只需在初始化时保留对滑块的引用，然后在更改选项卡时调用reloadSlider，在您的情况下使用easy tabs必须使用easytabs：事件之后。

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事件挂钩的更多信息，请点击此处： https://os.alfajango.com/easytabs/#configuration

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

1 个答案: