光滑的轮播响应断点不适用于ipad视图

时间:2018-09-05 05:23:27

标签: jquery slick slick.js

我有一个光滑的旋转木马,当桌面视图上的项目数大于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元素。

0 个答案:

没有答案