1

優れたcaroufredselを使用して応答性の高いカルーセルを構築しました。アイテムは常に一度に 1 つずつ、滑らかなアニメーションでスクロールする必要があります。

現在、ページの読み込み (または更新) では、項目は正しく (一度に 1 つずつ) スクロールされますが、ブラウザー ウィンドウのサイズを変更した後、[次へ] を押すと 2 つ以上の項目がスキップされます。次に更新すると、次の画面幅の変更まで問題が修正されます。

また、アニメーションは、画面が可能な限り最小の幅 (一度に 1 つのアイテムが表示されている) の場合にのみ機能し、2 つ以上のアイテムが同時に表示されている場合には機能しません。

サイトはこちらからご覧いただけます。

現在、次のコードがプラグインをトリガーしています (画面のサイズを変更した後にプラグインが破棄されて復元されると、挿入された css または同等のものが残っているため、すべてが破棄され、ピン留めできません。 ..):

<script type="text/javascript">

$(document).ready(function() {

$("#guitars-gallery").carouFredSel({
auto: false,
circular: false,
prev: '#prev',
next: '#next',
responsive : true,
height : 'auto',
scroll: 1,
items : { width : 370, visible : { min : 1, max : 3 } } }); 

});

function doSomething() {

$('#guitars-gallery').trigger('destroy', true);
$('#guitars-gallery').css({'text-align': '','float': '','position': '','top': '','right': '','bottom': '','left': '','width': '90%','height': '','margin': '1% auto'});

$("#guitars-gallery").carouFredSel({
auto: false,
circular: false,
prev: '#prev',
next: '#next',
responsive : true,
height : 'auto',
scroll: 1,
items : { width : 370, visible : { min : 1, max : 3 } } });

};

var resizeTimer;

$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doSomething, 100);
});
</script>

これに関するヘルプは大歓迎です:-)

4

1 に答える 1

2

私はこのコードをテストしていませんが、これを試してみてください。あなたは注入されたCSSについて正しいです。カルーセルは新しいインラインスタイルで再びラップされますが、前のラッパーは削除されないため、新しいラッパーは前のラッパーの「囚人」になります。

function sliderInit() {
("#guitars-gallery").carouFredSel({
    auto: false,
    circular: false,
    prev: '#prev',
    next: '#next',
    responsive : true,
    height : 'auto',
    scroll: 1,
    items : { 
        width : 370, 
        visible : { 
            min : 1, 
            max : 3 
        } 
    } 
}); 
};

$(window).load(function() {
sliderInit();
}); 

var resizeTimer;

$(window).resize(function() {
$('.caroufredsel_wrapper').removeAttr('style');
$('#guitars-gallery').removeAttr('style');
clearTimeout(resizeTimer);
resizeTimer = setTimeout(sliderReInit, 100);
});
于 2013-02-14T15:11:43.317 に答える