Owl 使用 itemsTablet 和 itemsMobile 时轮播项目已修复

Question

我正在使用 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

移动端页面是这样的：

Answer 1

试试这个：

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

代码笔：https://codepen.io/YasirKamdar/pen/BYJENy

Owl 使用 itemsTablet 和 itemsMobile 时轮播项目已修复

Owl Carousel item is fixed when using itemsTablet and itemsMobile

javascript

slider

owl-carousel-2