Owl Carousel配置：点击触发自动滚动且单Slide容纳2张卡片

我懂你现在的困扰——已经搞定了按钮触发自动滚动的功能，但想让每个slide里塞2张卡片，设置items参数却没起效对吧？别急，咱们来一步步排查解决：

核心配置修正 #

首先，问题大概率出在初始化配置的细节上，或者有CSS样式冲突干扰了Owl的内置布局计算。给你一份调整后的初始化代码，重点看标注的部分：

$(document).ready(function() {
  var owl = $('.owl-carousel').owlCarousel({
    items: 2, // 关键：直接设置单slide显示2张卡片
    loop: true,
    margin: 10, // 保持卡片间的间距，避免挤在一起
    nav: false,
    autoplay: false, // 保留你手动触发的逻辑
    // 可选：响应式适配，不同屏幕尺寸自动调整显示数量
    responsive: {
      0: {
        items: 1 // 小屏幕下显示1张
      },
      768: {
        items: 2 // 屏幕宽度≥768px时显示2张
      }
    }
  });

  // 你的按钮触发自动滚动逻辑（保留原有代码即可）
  $('.your-trigger-button').click(function() {
    owl.trigger('play.owl.autoplay', [1500]); // 1500是自动滚动的间隔毫秒数
  });
});

常见坑点排查 #

如果设置后还是没效果，检查这几个地方：

• 不要手动给.owl-item加固定宽度：比如你可能写了.owl-item { width: 50%; }，这会覆盖Owl的自动计算逻辑，直接删掉这类自定义CSS
• 检查slideBy参数：如果之前设置了slideBy，要让它和items值一致（比如slideBy:2），不然滚动时会出现显示不全的情况
• 脚本加载顺序：确保先加载jQuery，再加载Owl Carousel的JS文件，顺序错了会导致配置不生效

针对你的示例调整 #

你可以直接把上面的items:2配置加到你现有的代码里，去掉任何可能限制slide宽度的自定义样式，就能看到每个slide显示2张卡片的效果了。

内容的提问来源于stack exchange，提问作者The Old County