我正在使用Owl Carousel 2.2.1在幻灯片中创建文章。 我做了这些设置来改变不同屏幕尺寸的项目数量:
$(".news").owlCarousel({
items: 4,
itemsDesktopSmall: [990, 3],
itemsTablet: [768, 2],
itemsMobile: [480, 1]
});
但项目数量始终为4!
这是示例HTML:
<div class="news owl-carousel owl-theme">
<h4>Title 1</h4>
<h4>Title 2</h4>
<h4>Title 3</h4>
<h4>Title 4</h4>
</div>
真实页面在这里(暂时): http://new.khayyamkar.ir
移动设备中的页面如下:
答案 0 :(得分:1)
试试这个:
$('.news').owlCarousel({
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:5,
nav:true,
loop:false
}
}
})