调整响应式Jcarousel中的滚动数

Question

根据此处的示例，我有一个响应式jcarousel。

这是我的代码：

$(function() {
    var jcarousel = $('.jcarousel');
    //var navpanenext = '+=1';
    //var navpaneprev = '-=1';

    jcarousel
        .on('jcarousel:reload jcarousel:create', function () {
            var carousel = $(this),
                width = carousel.innerWidth();

            if (width >= 600) {
                width = width / 3;
                //navpanenext = '+=3';
                //navpaneprev = '-=3';

            } else if (width >= 350) {
                width = width / 2;
                //navpanenext = '+=2';
                //navpaneprev = '-=2';
            }

            carousel.jcarousel('items').css('width', Math.ceil(width) + 'px');
        })
        .jcarousel({
            wrap: 'circular'
        });


    $('.jcarousel-control-prev')
       .jcarouselControl({
            target: '-=3'
            //target: navpaneprev
        });

    $('.jcarousel-control-next')
        .jcarouselControl({
            target: '+=3'
            //target: navpanenext
        });
});

在全宽版本（宽度大于600）中，它一次显示3个项目，如果调整了窗口的大小，则视口将调整为显示更少的项目。

无论视口大小如何，我的控件（jacrousel-control-prev，jcarousel-control-next）一次滚动+或-3个项目。 调整视口宽度时，有没有办法调整“目标”值？ 在重载函数中定义变量的初始尝试不起作用（示例显示为注释）。

感谢您的任何想法。

Answer 1

您可以尝试使用以下代码：

$('.jcarousel-control-prev').click(function() {
    if (matchMedia('only screen and (min-width: 630px)').matches) {
        $('.jcarousel').jcarousel('scroll', '-=3');
    }  

    else if (matchMedia('only screen and (min-width: 380px) and (max-width: 630px) ').matches) {
        $('.jcarousel').jcarousel('scroll', '-=2');
    }   
});

$('.jcarousel-control-next').click(function() {
    if (matchMedia('only screen and (min-width: 630px)').matches) {
        $('.jcarousel').jcarousel('scroll', '+=3');
    }  

    else if (matchMedia('only screen and (min-width: 380px) and (max-width: 630px) ').matches) {
        $('.jcarousel').jcarousel('scroll', '+=2');
    }     
});

我在Firefox中使用“ Ctrl + Shift + M”确定了宽度（630px和380px）。 这可能不太合适，但至少适用于这种情况。