0

jquery の新規ユーザーですが、お手柔らかにお願いします :)

私は素晴らしいcaroufredsel (レスポンシブ jquery カルーセル) を使用しており、最初にセットアップしたので、スクロール機能に満足しています。

ギターの一覧を表示しています。現在は 3 つしかありませんが、今後さらに追加できるようにしたいと考えています。

レスポンシブ サイトを構築していますが、小さい画面サイズでは 2 つしか表示されず、一度に 1 つのギターしか表示されません。問題は、全幅のブラウザーで開始することです。小さい画面にサイズ変更すると、jquery はこれを考慮して再起動しません。したがって、スライダー コントロールを表示するには、小さいサイズで画面を更新する必要があります。

同様に、小さな画面から始めて拡大すると、すべての項目が表示されるため、機能的には役に立たなくても、コントロールは画面上に残ります。

したがって、必要な場合にのみコントロールを表示し (つまり、カルーセルのすべてのコンテンツが一度に表示されない場合)、更新せずに現在の画面サイズに応じて調整する必要があります。

これは、画面のサイズが変更されたときにカルーセルを破棄して再起動することで可能だと思いますが、機能させることはできません。

このサイトは、次のアドレスでオンラインになっています: http://www.wirebirdguitars.com/staging/guitars.html

どんな助け/提案も本当に感謝しています。ありがとう！！

4

1 に答える 1

1

これを JS に追加します。

function doSomething() {

    $('#guitars-gallery').trigger('destroy');

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

};

var resizeTimer;

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

この質問に触発されました。

于 2012-06-21T13:27:35.367 に答える