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

时间:2012-01-10 16:42:30

标签: javascript jquery jcarousellite onresize

我正在尝试重新调整,或者在调整窗口大小时销毁并重新应用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"]
    });
});

SOLUTION:

“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! :)
});

1 个答案:

答案 0 :(得分:1)

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

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

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