Owl Carousel动态生成Item缺失Active类问题求助

嘿，我看到你遇到的问题了——动态生成Owl Carousel的轮播项后，没有item带有active类对吧？这其实是因为Owl不会自动给动态添加的项加上active类，而且你的代码里还有个小细节需要调整，我来帮你搞定：

问题分析 #

1. 选择器错误：你代码里的$("owl-carousel")是在查找标签名为<owl-carousel>的元素，但通常Owl Carousel的容器是带有owl-carousel类的div，所以应该用类选择器$(".owl-carousel")，否则触发的add.owl.carousel事件不会被正确捕获。
2. 动态项无active类：Owl Carousel在初始化时会自动给第一个静态项加上active类，但动态添加的项不会自动触发这个逻辑，需要我们手动处理。

修正后的代码 #

for (var i = 0; i < data.length; i++) {
  // 给第一个轮播项添加active类
  var itemClass = i === 0 ? "item active" : "item";
  // 注意修正选择器为类选择器
  $(".owl-carousel").trigger('add.owl.carousel', [
    '<div class="' + itemClass + '">' +
      '<div class="flyout-content">' +
        '<h5>' + data[i].firstName + '</h5>' +
        '<h3>' + data[i].lastName + '</h3>' +
      '</div>' +
    '</div>'
  ]);
}

// 所有项添加完成后，刷新轮播让Owl识别新内容
$(".owl-carousel").trigger('refresh.owl.carousel');

// 可选：直接跳转到第一个轮播项，确保active类正确生效
$(".owl-carousel").trigger('to.owl.carousel', [0]);

额外说明 #

• 如果你的Owl Carousel是先初始化再动态添加项，上面的代码完全适用；如果是先添加项再初始化，那其实初始化时Owl会自动给第一个项加active类，这时候只需要确保初始化逻辑在添加项之后执行即可。
• 调用to.owl.carousel事件不仅会跳转到指定项，还会自动给对应项加上active类，同时移除其他项的active类，这是更稳妥的方式，尤其是当你不确定初始项状态的时候。

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