Точная точка останова на карусели не работает для ipad. - PullRequest
Новая
       38

Точная точка останова на карусели не работает для ipad.

0 голосов
/ 05 сентября 2018

У меня есть гладкая карусель, которая должна инициализироваться, когда количество элементов больше 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 на мобильном телефоне и три на рабочем столе. Но она отказывается отображать 2 изображения в режиме ipad.

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.

...