Javascript 幻灯片结束时，如何向swiper.js中的容器添加类？

我使用的是一个特定的项目，在大多数情况下都是可以的。但是，我想根据幻灯片在开始、中间或结尾的时间调整容器的外观

我知道有一个事件需要关注，但我不知道如何将该类添加到触发该特定事件的容器DOM中，因为同一页面中有多个旋转木马。我尝试使用

this.addClass（'reacted-end'）

和

$（this.addClass（'reacted-end'）

，但没有成功

<div class="carousel-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">First Slide</div>
    <div class="swiper-slide">Last Slide</div>
  </div>
</div>   

从中可以看到，所有事件都在Swiper实例的作用域下运行，而不是在代码预期的容器元素下运行：

请注意，事件处理程序中的此关键字始终指向Swiper实例

因此，您需要在事件处理程序中选择元素。请注意，Swiper为此提供了

$el

和

$wrapperEl

属性，具体取决于您要针对的父级

var cardDeck = new Swiper('.carousel-container', {
  on: {
    reachEnd: function () {
      this.$el.addClass('reached-end');
    }
  }
});

---

如果您使用console.log（$（this）），您会得到什么？这是否也会影响页面中的所有.carousel容器？如果我在页面中有多个怎么办？不。这就是

这个。$el

的用途；仅引用当前实例。确定。我是根据你在编辑前给出的回答做出这一评论的。谢谢它起作用了。过一会儿我会把它标为正确答案。