I'm trying to add a jQuery carousel plugin to a simple project and want to change the number of items scrolled per click, based on window's size.
The plugin is having bunch of settings defined within an array, like this:
Ocarousel.settings = {
... ,
... ,
perscroll: 3,
... ,
...
};
I want to have 1 item scrolled per click on small screens, 2 items on medium screens, and 3 items on big screens, so I'm trying to change "perscroll" initial value, like this:
if ($(window).width() <= 720){
Ocarousel.settings.perscroll = 1;
}
if ($(window).width() > 720 && $(window).width() <= 1152){
Ocarousel.settings.perscroll = 2;
}
if ($(window).width() > 1152){
Ocarousel.settings.perscroll = 3;
}
$(window).resize(function(){
if ($(window).width() <= 720){
Ocarousel.settings.perscroll = 1;
}
if ($(window).width() > 720 && $(window).width() <= 1152){
Ocarousel.settings.perscroll = 2;
}
if ($(window).width() > 1152){
Ocarousel.settings.perscroll = 3;
}
});
The problem: Only the first half of my code works. When reloading page on different window sizes the code works fine - I'm having 1 item scrolled when screen size is 720px or less, 2 items when it's between 720px and 1152px, and 3 items when bigger than 1152px and that's exactly what I need. But when browser's window is being resized - nothing happens. The value from the time the page was loaded is still used (instead of the one declared in the "resize" function).
So my question is if somebody can tell me what am I doing wrong. I'm very new to jQuery and my knowledge is still very little. Tried to find answer on Google but no luck so far.
Thank you very much in advance.
I think that Ocarousel.settings.perscroll = x
is for initialize and configure your carousel, so It can't modify the behavior after this one is created. So try to find a function or method in this plugin that give your the possibility to change the perscroll
setting or try to 're-draw' ou 're-create' your carousel every time you want modify this setting.