-2

jQuery cycle2 とカルーセル プラグインを使用して、サイトにいくつかのイベントを表示しています。それはすべてうまく機能しますが、表示オプションをタブレットでは 5 から 3 (768px から 1030px の間) に変更し、電話では 1 (768px 未満) に変更したいと考えています。他のすべてのオプションは同じままでかまいません。このコードは一緒にハッキングされていて面倒なので、もっと良い方法を探しています。また、現在は更新時にのみ機能します。それはそれでいいのですが、サイズ変更時にリロードしてリアルタイムで動作するようになればいいですね。これが私の現在のコードです：

// Events
var ww = document.body.clientWidth;
$(document).ready(function() {
    adjustEvents();
})
$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustEvents();
});

var adjustEvents = function() {
    if (ww > 1030) {
        $('.cycle').cycle({
            fx:'carousel',
            swipe:true,
            timeout:5000,
            slides:'> article',
            carouselVisible:5,
            carouselFluid:true,
            autoHeight:'calc',
            prev:'#prev',
            next:'#next'
        });
    } 
    else if (ww >= 768) {
        $('.cycle').cycle({
            fx:'carousel',
            swipe:true,
            timeout:5000,
            slides:'> article',
            carouselVisible:3,
            carouselFluid:true,
            autoHeight:'calc',
            prev:'#prev',
            next:'#next'
        });
    }
    else if (ww < 768) {
        $('.cycle').cycle({
            fx:'carousel',
            swipe:true,
            timeout:5000,
            slides:'> article',
            carouselVisible:1,
            carouselFluid:true,
            autoHeight:'calc',
            prev:'#prev',
            next:'#next'
        });
    }
}
4

2 に答える 2

5 
$(document).ready(adjustEvents);
$(window).on('resize orientationchange', adjustEvents);

function adjustEvents() {
    var ww  = document.body.clientWidth,
        vis = ww > 1030 ? 5 : (ww >= 768 ? 3 : 1);
    $('.cycle').cycle({
        fx              : 'carousel',
        swipe           : true,
        timeout         : 5000,
        slides          : '> article',
        carouselVisible : vis,
        carouselFluid   : true,
        autoHeight      : 'calc',
        prev            : '#prev',
        next            : '#next'
    });
}
于 2013-11-07T16:54:54.950 に答える
3

これがコードの「トリミングされた」バージョンです...

// Events
var ww = document.body.clientWidth;
$(document).ready(function() {
    adjustEvents();
})
$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustEvents();
});

var adjustEvents = function() {
    var options = {
        fx:'carousel',
        swipe:true,
        timeout:5000,
        slides:'> article',
        carouselFluid:true,
        autoHeight:'calc',
        prev:'#prev',
        next:'#next'
    }

    if (ww > 1030) {
        options.carouselVisible = 5;
    } 
    else if (ww >= 768) {
        options.carouselVisible = 3;
    }
    else if (ww < 768) {
        options.carouselVisible = 1;
    }
    $('.cycle').cycle(options);
}

私が実際に行ったのは、サイクル オプションを格納する変数を作成し、各幅に関連する 1 つのプロパティのみを変更することだけでした。

于 2013-11-07T16:54:24.430 に答える