javascript - Adjusting the scroll number in responsive jcarousel -

i'm got responsive jcarousel working based on example here.

here's code:

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

in full width version (width > 600) displays 3 items @ time , if window resized viewport adjusted show fewer items.

my controls (jacrousel-control-prev, jcarousel-control-next) scroll + or - 3 items @ time regardless of viewport size. there way adjust 'target' value viewport width adjusted? inital attempts define variable within reload function don't work (shown comments example).

thanks thoughts.

you try using codes below:

$('.jcarousel-control-prev').click(function() {     if (matchmedia('only screen , (min-width: 630px)').matches) {         $('.jcarousel').jcarousel('scroll', '-=3');     }        else if (matchmedia('only screen , (min-width: 380px) , (max-width: 630px) ').matches) {         $('.jcarousel').jcarousel('scroll', '-=2');     }    });  $('.jcarousel-control-next').click(function() {     if (matchmedia('only screen , (min-width: 630px)').matches) {         $('.jcarousel').jcarousel('scroll', '+=3');     }        else if (matchmedia('only screen , (min-width: 380px) , (max-width: 630px) ').matches) {         $('.jcarousel').jcarousel('scroll', '+=2');     }      }); 

i determined width (630px , 380px) using "ctrl+shift+m" in firefox. might not appropriate @ least works case.