如何定位Owl Carousel的第二个激活项并设置特殊样式？

问题原因 #

直接用nth-child无效是因为Owl Carousel初始化后，会把所有item包裹在owl-stage容器里，滑动时DOM的实际排列顺序和原始HTML结构不一致，而且默认的active类只会标记当前激活的主项，没法直接定位第二个可见位置的元素。

解决方案 #

1. 给Owl Carousel添加回调事件，动态标记目标项

在初始化Owl Carousel的JS代码里，加入changed.owl.carousel事件，每次轮播切换完成后，找到当前可见的第二个项，给它加自定义类（比如second-position），同时移除其他项的这个类：

$('.owl-carousel').owlCarousel({
  // 你的原有配置，比如显示数量、循环、间距等
  items: 3,
  loop: true,
  margin: 10,
  nav: true,
  // 添加轮播切换后的回调
  onChanged: function(event) {
    // 先清除所有项的自定义类
    $('.owl-item').removeClass('second-position');
    // 给当前可见的第二个项添加类（索引从0开始）
    $('.owl-item.active').eq(1).addClass('second-position');
  }
});

2. 编写CSS样式

针对添加的second-position类设置缩放或高度样式：

/* 给第二个位置的项设置放大效果 */
.owl-item.second-position {
  transform: scale(1.2);
  z-index: 10; /* 避免放大后被其他项遮挡 */
  transition: transform 0.3s ease; /* 实现平滑过渡 */
}

/* 若需单独调整图片样式 */
.owl-item.second-position .img_fluid {
  height: 100%;
  object-fit: contain;
}

注意事项

• 若你设置的单屏显示项数不是3，只需调整eq(1)的索引（始终对应第二个可见项，索引从0开始）。
• 确保使用的是Owl Carousel 2.x版本，1.x版本的回调事件写法不同。
• 开启loop: true时，上述代码通过owl-item.active获取可见项，能适配循环轮播的场景。

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