如何点击Owl Slider项时设置自定义激活类？为何滑块不跳转至第6项？

一、点击滑块项时添加自定义Active类 #

Owl Carousel本身会给当前激活的项加上owl-item.active类，但如果你想要用自己的自定义类（比如叫custom-active），得把点击事件和滑块的状态同步起来，不然容易出现类和滑块状态不匹配的情况，咱们一步步来：

1. 先确保滑块初始化正确 #

首先得把你的Owl Carousel初始化代码写完整，不然后续的操作都没法生效，比如：

$(document).ready(function(){
  // 把滑块实例存到变量里，后面要用
  var owl = $(".owl-carousel").owlCarousel({
    // 根据你的需求改配置，比如一次显示几个、是否循环、有没有导航按钮等
    items: 1,
    loop: true,
    nav: true,
    dots: true
  });
});

2. 绑定点击事件切换自定义类 #

给每个滑块项绑定点击事件，点击的时候先把所有项的自定义active类去掉，再给当前点击的加上，同时还要让滑块跳转到这个项的位置，这样滑块自带的active类也会同步过来：

// 接上面的初始化代码
$(".owl-carousel .item").on("click", function(){
  // 移除所有项的自定义active类
  $(".owl-carousel .item").removeClass("custom-active");
  // 给当前点击的项加上自定义类
  $(this).addClass("custom-active");
  // 获取当前项的索引（注意Owl的索引是从0开始的）
  var itemIndex = $(this).index();
  // 触发滑块跳转，300是动画时长，true表示要触发回调事件
  owl.trigger('to.owl.carousel', [itemIndex, 300, true]);
});

3. 滑块切换时同步自定义类（重要） #

除了点击项切换，用户还可能通过导航按钮、自动轮播切换滑块，这时候也要同步更新自定义类，不然自定义类就会停留在之前点击的项上：

// 监听滑块切换完成的事件
owl.on('changed.owl.carousel', function(event) {
  // 先移除所有项的自定义类
  $(".owl-carousel .item").removeClass("custom-active");
  // 获取当前激活项的索引，给对应的项加上自定义类
  var currentActiveIndex = event.item.index;
  $(".owl-carousel .item").eq(currentActiveIndex).addClass("custom-active");
});

4. 给自定义类加样式（可选） #

最后记得给自定义类写CSS，这样才能看到视觉效果：

.custom-active {
  background-color: #e6f7ff;
  border: 1px solid #1890ff;
  border-radius: 4px;
  padding: 8px;
  /* 其他你想要的样式 */
}

二、为什么滑块不跳转至第6个子项？ #

你说加了自定义激活类但滑块没跳到第6项，大概率是这几个坑：

• 索引搞错了：Owl Carousel的索引是从0开始计数的，第6个子项的索引是5，不是6！如果你传了6，要么跳去第7项，要么没反应。
• 没拿到滑块实例：如果初始化滑块的时候没把实例存到变量（比如var owl = ...），直接调用trigger是没用的，因为找不到对应的滑块对象。
• 配置限制：如果你的滑块设置了loop: false，而且第6项超出了当前可视范围，可能需要检查margin、items这些配置，确保滑块能滚动到对应位置。

正确跳转到第6项的代码 #

如果要主动让滑块跳到第6项，用下面的代码：

// 滑块实例是之前存的owl，索引传5
owl.trigger('to.owl.carousel', [5, 300, true]);

完整可运行示例 #

<div class="all_series">
  <div class="owl-carousel">
    <div class="item">slider1</div>
    <div class="item">slider2</div>
    <div class="item">slider3</div>
    <div class="item">slider4</div>
    <div class="item">slider5</div>
    <div class="item">slider6</div> <!-- 这是第6项 -->
  </div>
</div>

<script>
$(document).ready(function(){
  var owl = $(".owl-carousel").owlCarousel({
    items: 1,
    loop: true,
    nav: true,
    dots: true
  });

  // 点击项添加自定义类并跳转
  $(".owl-carousel .item").on("click", function(){
    $(".owl-carousel .item").removeClass("custom-active");
    $(this).addClass("custom-active");
    var itemIndex = $(this).index();
    owl.trigger('to.owl.carousel', [itemIndex, 300, true]);
  });

  // 滑块切换时同步自定义类
  owl.on('changed.owl.carousel', function(event) {
    $(".owl-carousel .item").removeClass("custom-active");
    $(".owl-carousel .item").eq(event.item.index).addClass("custom-active");
  });

  // 如果你想页面加载就跳到第6项，解开下面的注释
  // owl.trigger('to.owl.carousel', [5, 300, true]);
});
</script>

<style>
.custom-active {
  background: #e6f7ff;
  border-radius: 4px;
  padding: 10px;
}
</style>

内容的提问来源于stack exchange，提问作者s.h.bhati