Question

根据示例here，我有一个响应式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个项目，无论视口大小如何。有没有办法在调整视口宽度时调整“目标”值？ Inital尝试在重新加载函数中定义变量不起作用（显示为注释作为示例）。

感谢您的任何想法。

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）。这可能不合适，但至少它适用于这种情况。

调整响应式jcarousel中的滚动数

1 个答案: