2

ウィンドウのサイズを変更するときに jCarouselLite プラグインを再調整または破棄して再適用しようとしていますが、成功しません。これは、各ページが「li」である Web サイトを作成したためです。メニューをナビゲートするときにスクロールします。その「ページ」...

サイズ変更時にこれを使用し、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! :)
});
4

1 に答える 1

1

jCarouselLite (およびほぼすべてのカルーセル プラグイン) は、カルーセルの作成時に追加のマークアップを挿入します。elementsWidth * numberOfElements通常、オーバーフローが非表示の幅で設定された包含要素。その中に含まれる 2 番目の要素も作成され、それが実際に移動します。次に、要素がフロートされ、セカンダリ要素の左マージンが変更されてスクロール効果が得られます。

つまり、それを変更したい場合は、divを含むものの幅や、ウィンドウのサイズが変更されたときにスクロールしている要素の幅を変更する必要があります。

カルーセルを再初期化する代わりに、ウィンドウのサイズ変更時にこれらの要素のサイズを変更してみて、何が起こるかを確認してください (マークアップなしで、それが私ができる最善のアドバイスです)

于 2012-01-10T16:51:30.400 に答える