我有一个光滑的旋转木马,当桌面视图上的项目数大于3时,必须对其进行初始化。另外,在移动设备上,当项目大于1时必须对其进行初始化。
圆滑的轮播代码-
if ($('.ro-carousel-retail ul li').length > 3 || window.matchMedia("(max-
width: 1023px)").matches) {
$('.ro-carousel-retail ul').slick({
centerMode: false,
centerPadding: '0px',
slidesToShow: 3,
slidesToScroll: 3,
arrows: true,
dots: true,
autoplay: false,
autoplaySpeed: 5000,
cssEase: "ease-out",
infinite: true,
responsive: [
{
breakpoint: 1023,
settings: {
arrows: false,
centerMode: false,
centerPadding: '0px',
dots: true,
slidesToShow: 3,
slidesToScroll: 3,
infinite: false,
}
},
{
breakpoint: 767,
settings: {
arrows: false,
centerMode: false,
centerPadding: '0px',
dots: true,
slidesToShow: 2,
slidesToScroll: 2,
infinite: false,
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: false,
centerPadding: '0px',
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
infinite: false,
}
},
]
});
}
问题:轮播必须在ipad视图中显示两个图像,在移动设备上显示1个图像,在台式机上显示三个图像,但是它拒绝在ipad视图中显示2个图像。
HTML
<div class="ro-carousel-retail">
<ul>
<li class="col-md-4 col-xs-12">
<div class="retail-logo">
<img src="images/community/bon-logo.jpg">
</div>
<div class="retail-txt">
<div class="r-name">
British Orchard Nusery
<span>FITNESS</span>
</div>
<div class="r-contact">
<span class="phone"></span>
04 - 83345633
</div>
</div>
</li>
</ul>
</div>
我有多个这样的ul元素。