I'm attempting to use jQuery jCarouselLite in my project, but there does not seem to be a way to change the "visible" option dynamically based on screen size. Is it possible to change the original configuration parameters and see the changes in the UI immediately?
Try resizing the RESULT window in the fiddle to see it in effect
JS:
$(function() {
$(".anyClass").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
visible: 5
});
});
$(window).trigger('resize');
$(window).resize(function(){
if($(window).width() > 300 && $(window).width() < 400){
$('.next, .prev').unbind('click');
$('.anyClass').jCarouselLite({
visible: 3.5,
btnNext: ".next",
btnPrev: ".prev"
});
}
else if($(window).width() > 400 && $(window).width() < 500){
$('.next, .prev').unbind('click');
$('.anyClass').jCarouselLite({
visible: 4.5,
btnNext: ".next",
btnPrev: ".prev"
});
}
else if($(window).width() >= 500){
$('.next, .prev').unbind('click');
$('.anyClass').jCarouselLite({
visible: 5,
btnNext: ".next",
btnPrev: ".prev"
});
}
});
HTML:
<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
<ul>
<li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
<li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
<li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
<li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
<li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
<li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
<li><img src="http://placekitten.com/100/100" alt="" width="100" height="100" /></li>
</ul>
</div>