Owl Carousel v2.2.0无法按屏幕尺寸显示对应轮播项

你遇到的问题根源是Owl Carousel v2.x版本已废弃itemsDesktop、itemsTablet这类旧响应式配置参数，改用responsive对象定义不同断点的显示规则，旧参数在v2.2.0中不再生效，导致所有屏幕都沿用了items:3的默认配置。

以下是修改后的JS代码，替换原配置即可实现桌面3个、平板2个、移动端1个的预期效果：

$(document).ready(function () {
  $("#slider-carousel").owlCarousel({
    rtl: true,
    items: 3, // 大屏默认显示数量
    pagination: false,
    dots: false,
    lazyLoad: true,
    nav: true,
    navText: [
      "<i class='fa pe-7s-angle-right'></i>",
      "<i class='fa pe-7s-angle-left'></i>"
    ],
    afterInit: function (elem) {
      var that = this;
      that.owlControls.prependTo(elem);
    },
    // 核心响应式配置
    responsive: {
      // 屏幕宽度≤1024px（平板横屏及以下）
      1024: {
        items: 3
      },
      // 屏幕宽度≤768px（平板竖屏）
      768: {
        items: 2
      },
      // 屏幕宽度≤480px（移动端）
      480: {
        items: 1
      }
    }
  });
});

关键修改说明： #

• 移除所有itemsDesktop、itemsTablet等废弃参数
• 添加responsive对象，每个属性键为最大屏幕宽度断点，值对应该断点下的显示配置（此处仅需设置items数量）
• items:3作为默认值，会在屏幕宽度超过最大断点（1024px）时生效

HTML部分无需修改，保持原结构即可。

内容的提问来源于stack exchange，提问作者Learning