jquery - 在 Resize 上重新加载 jquery 插件

Question

我希望bxSlider重新启动，以便在div调整窗口大小时重新计算尺寸并适应新的宽度和高度。

我想知道，如何在 jQuery 中重新加载调整大小的插件。

我想要那个简单的功能

//Home slider function
function hSlider(){
    $('.hCarousel').bxSlider({
        displaySlideQty: 3
    });
}

$(window).resize(function(e){
    hSlider();
}).resize();

重新加载resize()

这可能吗？

Answer 1

查看http://bxslider.com/options上的 api，您应该能够调用这些函数中的任何一个。

destroyShow() 销毁活动幻灯片
reloadShow() 重新初始化幻灯片

//Home slider function
$('.hCarousel').bxSlider({
    displaySlideQty: 3
});


$(window).resize(function(e){
   $('.hCarousel').reloadShow();
});

注意未经测试但阅读api

Answer 2

据我了解，问题不在 resize 函数中，您问的是 reinit bxSlider？看这个答案：resetting bxSlider

reloadShow();

Answer 3

You should be able to call function on a resize event from straight js:

window.onresize = function(event) {     ... } 

Answer 4

假设您的其余代码是正确的，我destroyShow()在创建滑块之前添加了...

function hSlider(){
    $('.hCarousel').destroyShow().bxSlider({
        displaySlideQty: 3
    });
}

$(window).resize(function(e){
    hSlider();
}).resize();

bxSlider 文档

Answer 5

我以同样的方式做，但使用 underscore.js。

$(window).resize(_.bind(this.resizeList, this));

我认为你的错误在这里：

$(window).resize(function(e){;  <----- REMOVE THIS ;
    hSlider();
}).resize();                     <----- And I think this is not necessary too

这样的事情应该这样做：

$(window).resize(function(e){
    hSlider();
});