在“调整大小”窗口上重新应用或调整jCarouselLite

Question

我试图重新调整，或销毁和重新应用jCarouselLite插件时，调整窗口，但我没有成功，这是因为我创建了一个网站，每个页面是一个‘李’，在那里，当导航通过菜单滚动到‘页面’.

我尝试过在调整大小时使用此方法，并重新应用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“来做这个，但是搜索更多关于关闭插件的内容，我发现我也必须解除点击的绑定，所以，下面是我必须应用的代码：

$(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 (以及几乎所有的旋转木马插件)在创建旋转木马时都会注入一些额外的标记。通常是设置宽度为elementsWidth * numberOfElements且溢出隐藏的包含元素。还创建了第二个包含元素的元素，这就是实际要移动的元素。然后，您的元素将被浮动，次要包含元素的左侧边缘被更改，从而产生滚动效果。

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

尝试更改窗口上那些元素的大小，而不是重新初始化旋转木马，看看会发生什么(没有标记，这是我能给出的最好的建议)。