javascript - 在调整窗口大小时重新应用或调整 jCarouselLite

Question

我试图在调整窗口大小时重新调整或销毁并重新应用 jCarouselLite 插件，但我没有成功，这是因为我创建了一个网站，其中每个页面都是一个“li”，当浏览菜单时它滚动到那个“页面”...

我尝试在调整大小时使用它，并重新应用 jcarousellite，但它没有用:

$('#mega').jCarouselLite = null;

这是我正在使用的代码，但如果我继续重新应用 jcarouselLite，轮播就会变得疯狂!

$(document).ready(function(){
    w = $(window).width();
    h = $(window).height();
    $('#mega li').css('width',w);
    $('#mega li').css('height',h);
    $('#mega').jCarouselLite({
        circular:false,
        vertical:true,
        speed:1000,
        visible:1,
        btnGo:["#home", "#comofunciona", "#porquemegafome", "#contato"]
    });
});
$(window).resize(function() {
    w = $(window).width();
    h = $(window).height();
    $('#mega li').css('width',w);
    $('#mega li').css('height',h);
    $('#mega').jCarouselLite({
        circular:false,
        vertical:true,
        speed:1000,
        visible:1,
        btnGo:["#home", "#comofunciona", "#porquemegafome", "#contato"]
    });
});

解决方案:

“idrumgood”，我试图只用“li”来做到这一点，但搜索了更多关于停用插件的信息，我发现我也必须取消绑定(bind)点击，所以，这是我必须应用的代码:

$(window).resize(function() {
    $('#mega').jCarouselLite = null;
    $('#home, #comofunciona, #porquemegafome, #contato').unbind('click'); //buttons I defined on btnGo option
    runCarousel(); //again
    aClick(); // function where I get the li index and save into a hidden input, on resize it keeps li position! :)
});

Answer 1

jCarouselLite(以及几乎所有轮播插件)在创建轮播时注入(inject)一些额外的标记。通常是一个包含元素，其宽度设置为 elementsWidth * numberOfElements 并隐藏了溢出。还创建了其中的第二个包含元素，这就是实际移动的元素。然后您的元素会 float ，辅助包含元素的左边距会更改以提供滚动效果。

要点是，如果你想改变它，你需要改变那些包含 div 的宽度和/或当窗口调整大小时你正在滚动的元素的宽度。

尝试在调整窗口大小时更改这些元素的大小，而不是重新初始化轮播，看看会发生什么(没有您的标记，这是我能提供的最佳建议)