Элемент Owl Carousel исправлен при использовании itemsTablet и itemsMobile

Я использую 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

На мобильных устройствах страница выглядит так:

Страница такая


javascript slider owl-carousel-2
person rostamiani    schedule 18.02.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Попробуй это:

$('.news').owlCarousel({
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }
    }
})

Codepen: https://codepen.io/YasirKamdar/pen/BYJENy

person Yasir    schedule 18.02.2018
comment
Спасибо, это работает хорошо. Но в чем проблема с моим кодом? - person rostamiani; 18.02.2018