我正在尝试在我的项目中使用 jQuery jCarouselLite,但似乎没有办法根据屏幕大小动态更改“可见”选项。是否可以更改原始配置参数并立即在 UI 中看到更改?
问问题
3101 次
1 回答
1
这是您的操作方法:
JSFIDDLE尝试在小提琴中调整 RESULT 窗口的大小以查看它的效果
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>
于 2013-08-22T06:17:08.903 回答