Owl Carousel v2.2.0 未根据屏幕尺寸显示项目数量

Question

我有一个简单的轮播，它使用旧版本

Owl Carousel v2.2.0

，由于某种原因它仅适用于大屏幕，并且仅采用=大屏幕的默认值。并且它在另一个屏幕上没有响应。

轮播应在桌面上显示 3 个项目，在桌面上显示 2 个项目，在移动设备上显示 1 个项目。

轮播可以工作，但针对所有屏幕尺寸显示 3 个项目 https://codepen.io/KGuide/pen/abjZLbQ

JS代码

$(document).ready(function () {
  $("#slider-carousel").owlCarousel({
    rtl: true,
    //autoPlay: 5000, Set AutoPlay to 5 seconds
    items: 3,
    itemsDesktop: [1199, 3],
    itemsDesktopSmall: [980, 3],
    itemsTablet: [768, 2],
    itemsTabletSmall: false,
    //itemsMobile: [479, 1],
    itemsMobile: false, // itemsMobile disabled - inherit from itemsTablet option
    pagination: false,
    dots: false,
    //video:true,
    // autoplayHoverPause: false,
    lazyLoad: true,
    nav: true,
    navText: [
      "<i class='fa pe-7s-angle-right'></i>",
      "<i class='fa pe-7s-angle-left'></i>"
      //  "<i class='fa pe-7s-angle-left'></i>",
      // "<i class='fa pe-7s-angle-right'></i>"
    ],
    afterInit: function (elem) {
      var that = this;
      that.owlControls.prependTo(elem);
    }
  });
});

HTML

<div id="slider-carousel" class="owl-carousel owl-theme ">
        <div class="item">
          <img src="https://dummyimage.com/600x400/000/fff&text=1" alt="" />
        </div>
        <div class="item">
          <img src="https://dummyimage.com/600x400/000/fff&text=2" alt="" />
        </div>
        <div class="item">
          <img src="https://dummyimage.com/600x400/000/fff&text=3" alt="" />
        </div>
           <div class="item">
          <img src="https://dummyimage.com/600x400/000/fff&text=4" alt="" />
        </div>
           <div class="item">
          <img src="https://dummyimage.com/600x400/000/fff&text=5" alt="" />
        </div>
      </div>

我不确定是什么导致了这种行为。由于这是旧网站，我无法将其更改为最新的轮播版本。由于某种原因，它似乎坏了。

Answer 1

经过一番努力，我找到了解决方案，添加响应功能的正确方法是使用下面的代码

$(document).ready(function () {
  $("#slider-carousel").owlCarousel({
    //rtl: true,
    //autoPlay: 5000, Set AutoPlay to 5 seconds
 items: 3,
            responsive: {
                0: {
                    items: 1
                },
                479: {
                    items: 1
                },
                768: {
                    items: 3
                },
                980: {
                    items: 3
                },
                1199: {
                    items: 3
                }
            },
    pagination: false,
    dots: false,
    //video:true,
    // autoplayHoverPause: false,
    lazyLoad: true,
    nav: true,
    navText: [
      "<i class='fa pe-7s-angle-right'></i>",
      "<i class='fa pe-7s-angle-left'></i>"
      //  "<i class='fa pe-7s-angle-left'></i>",
      // "<i class='fa pe-7s-angle-right'></i>"
    ],
    afterInit: function (elem) {
      var that = this;
      that.owlControls.prependTo(elem);
    }
  });
});

添加后工作正常，问题中提到的方式适用于旧版本 owl Carousel v1.xx