0

jQuery を使用して最新の投稿をカルーセルにロードしています (ここからカルーセルを使用します)。このコードを使用して、最新の 3 つの投稿の 3 つのアイテムでカルーセルを設定します。

jQuery(function($) {
    $('#slider').carouFredSel({
        prev: '#btn_prev',
        next: '#btn_next',
        auto: false,
        items: 3,
    });
});

ただし、最初にデバイスの画面を確認する必要があります。小さい(モバイル)場合は、カルーセルのアイテムを1アイテムのみに設定し、中(タブレット/ iPad)の場合は2に設定し、通常のコンピューター画面の場合はアイテムを設定します3.どうすればこれを条件付きにすることができますか?

事前にどうもありがとう:)

4

1 に答える 1

0

画面サイズに基づいて変数を作成し、それをスライダーに提供します。

jQuery(function($) {
    var itemLength = 0;
    var windowSize = $(window).width();
    if (windowWidth > 1024) { itemLength = 3 }
    else if (windowWidth > 768 { itemLength = 2 }
    else { itemLength = 1 }

    $('#slider').carouFredSel({
        prev: '#btn_prev',
        next: '#btn_next',
        auto: false,
        items: itemLength,
    });
});
于 2013-06-15T18:42:41.400 に答える