Настройка числа прокруток в отзывчивой jcarousel

У меня есть адаптивная 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 элемента за раз, независимо от размера области просмотра. Есть ли способ настроить «целевое» значение при настройке ширины области просмотра? Первоначальные попытки определить переменную в функции перезагрузки не работают (показаны в виде комментариев в качестве примера).

Спасибо за любые мысли.


javascript jquery jcarousel
person Christian Mayne    schedule 11.05.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете попробовать использовать коды ниже:

$('.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');
    }     
});

Я определил ширину (630 пикселей и 380 пикселей) с помощью «Ctrl + Shift + M» в Firefox. Это может быть не совсем уместно, но, по крайней мере, это работает для этого случая.

person Bluey Blue    schedule 15.02.2016