如何点击切换Owl Carousel 2的显示条目数量？

你的思路完全可行，但现有代码有两个小问题导致功能没生效：

1. 在列表视图的点击事件里，你用var itemList = 1;重新声明了变量，这会创建一个局部变量，根本不会修改全局的itemList值，所以Carousel的配置压根没变化。
2. 只触发refresh.owl.carousel不够——这个事件只是让Carousel重新计算现有配置下的布局，不会更新items这个核心配置项。

修正后的完整代码 #

<ul class="list-unstyled view-holder">
  <li class="view-box grid-view active">
    <a href="javascript:;">Grid View</a>
  </li>
  <li class="view-box list-view">
    <a href="javascript:;">List View</a>
  </li>
</ul>
<div class="owl-carousel feature-carousel">
  <div class="item"> 1 </div>
  <div class="item"> 2 </div>
  <div class="item"> 3 </div>
  <div class="item"> 4 </div>
</div>

<script>
var itemList = 2;
var rtlVal = false; // 这里假设你的rtlVal有实际业务值，先设为false做示例
var $owlFeatureSlider = $(".feature-carousel");

// 封装Carousel初始化函数，方便重复调用
function initCarousel(itemsCount) {
  // 先销毁已有的Carousel实例（避免重复初始化冲突）
  if ($owlFeatureSlider.data('owl.carousel')) {
    $owlFeatureSlider.trigger('destroy.owl.carousel');
  }
  // 用新的条目数重新初始化
  $owlFeatureSlider.owlCarousel({
    rtl: rtlVal,
    loop: false,
    margin: 30,
    nav: false,
    items: itemsCount
  });
}

// 页面加载时先执行一次初始化
initCarousel(itemList);

// 列表视图切换逻辑
$(".list-view").click(function () {
  // 切换按钮的active状态（优化UI体验）
  $(".view-box").removeClass('active');
  $(this).addClass('active');
  
  // 修改全局条目数并重新初始化Carousel
  itemList = 1;
  initCarousel(itemList);
});

// 补上网格视图的切换逻辑，让功能完整
$(".grid-view").click(function () {
  $(".view-box").removeClass('active');
  $(this).addClass('active');
  
  itemList = 2;
  initCarousel(itemList);
});
</script>

关键说明 #

• 封装initCarousel函数是核心：每次切换视图时先销毁旧的Carousel实例，再用新的items数量重新初始化——这是Owl Carousel动态修改核心配置最稳妥的方式，能避免版本兼容性问题。
• 去掉了局部变量声明，直接修改全局的itemList，确保配置更新真正生效。
• 补上了网格视图的点击事件，同时维护按钮的active类，让UI状态和功能逻辑保持一致。

如果你不想用销毁重建的方式，也可以尝试直接修改配置后刷新：

$(".list-view").click(function () {
  itemList = 1;
  // 直接更新Carousel的items配置
  $owlFeatureSlider.data('owl.carousel').options.items = itemList;
  // 触发刷新让配置生效
  $owlFeatureSlider.trigger('refresh.owl.carousel');
});

不过这种方式在部分Owl Carousel版本中可能出现布局异常，还是销毁重建的兼容性更好。

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