I'm currently trying to create a responsive slider where the user can choose how many items display on screen, he can decide how many item on every custom mediaquery he wants. So my idea is to pass a obj with all the mediaqueries
$(".slider-container1").slider({
itemsOnScreen: 5,
spaceBetween: 20,
draggable: true,
responsive: {
"480": 2,
"768": 3,
"1024": 5
}
});
Then I store it inside a slider property mq so I can access it in a easy way
var slider = {
mq: params.responsive
};
Then comes the hard part.
My idea was to create a function inside
$(document).on('resize', function(){
beResponsive();
});
where the function beResponsive() control the resposive part of the slider.
My idea was to create a loop based on the slider.mq in this way
function beResponsive() {
for(var width in slider.mq){
if ("width is between two values stored in slider.mq") {"do stuff to do responsive"};
}
}
beResponsive();
In this way i cannot get it work because I can't find a way to access to two different properties of the obj at the same time (for example 480 and 768).
Any idea to achieve this? Any other idea about performances? Any others better way to achieve that?
Aucun commentaire:
Enregistrer un commentaire