如何提取owl carousel首个元素实现上下轮播内容联动

你之前尝试给第一个轮播项加自定义类不生效，核心原因是Owl Carousel开启loop: true时，会自动在轮播首尾插入克隆节点实现无缝滚动效果，初始化前直接给原生DOM的第一个.item加类，会被插件的DOM重写逻辑干扰；同时原生CSS的:first-child、jQuery的:first选择器会优先匹配到插件插入的克隆节点，无法定位到实际可见的首个轮播元素。

方案1：双轮播同步（满足上下区块同步展示需求） #

拆分两个独立的轮播容器，顶部为单图展示区，底部为可交互的多图轮播区，通过插件事件实现同步，是这类需求最稳定的实现方式。

1. 调整HTML结构

<style>
.item{
    height: 40vh;
    background-color: rgb(211, 38, 38);
    color: #fff;
}
.hero{
    height: 100vh;
    background-color: aqua;
    color: #fff;
}
/* 自定义首个可见项样式 */
.first-visible-item {
  border: 2px solid #fff;
}
</style>

<!-- 顶部同步展示区 -->
<div class="owl-carousel owl-theme sync-top">
    <div class="item hero"><h4>14444</h4></div>
    <div class="item hero"><h4>2</h4></div>
    <div class="item hero"><h4>3</h4></div>
    <div class="item hero"><h4>4</h4></div>
    <div class="item hero"><h4>5</h4></div>
    <div class="item hero"><h4>6</h4></div>
    <div class="item hero"><h4>7</h4></div>
    <div class="item hero"><h4>8</h4></div>
    <div class="item hero"><h4>9</h4></div>
    <div class="item hero"><h4>10</h4></div>
    <div class="item hero"><h4>11</h4></div>
    <div class="item hero"><h4>12</h4></div>
</div>

<!-- 底部可交互轮播区 -->
<div class="owl-carousel owl-theme sync-bottom">
    <div class="item"><h4>14444</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

2. 初始化轮播并绑定同步逻辑

// 初始化顶部展示轮播，关闭所有交互
const topCarousel = $('.sync-top').owlCarousel({
    loop: true,
    margin: 10,
    nav: false,
    dots: false,
    items: 1
});

// 初始化底部交互轮播
$('.sync-bottom').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive:{
        0:{ items:1 },
        600:{ items:2 },
        1000:{ items:3 }
    },
    // 监听轮播切换事件，同步顶部展示内容
    onChanged: function(prop) {
        const currentIndex = prop.item.index;
        topCarousel.trigger('to.owl.carousel', [currentIndex, 300]);
    }
});

方案2：单轮播精准定位首个可见元素 #

如果不需要拆分双轮播，只需要给当前可见的第一个轮播项加自定义样式/类，直接用插件自带的事件回调获取激活项即可，不要用原生选择器硬选：

$('.owl-carousel')
.on('initialized.owl.carousel changed.owl.carousel', function(e) {
    // 先清除所有项的自定义类
    $(e.target).find('.owl-item').removeClass('first-visible-item');
    // 给当前第一个可见的激活项加自定义类
    $(e.target).find('.owl-item.active').eq(0).addClass('first-visible-item');
})
.owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{ items:1 },
        600:{ items:2 },
        1000:{ items:3 }
    }
});

注意：所有DOM操作必须放在插件的初始化/切换事件回调里执行，不要在初始化前直接操作静态DOM节点，否则会被loop模式的克隆节点逻辑干扰，导致选择结果不符合预期。

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