Question

我正在为特定项目使用swiper.js，在大多数情况下都可以。但是我想根据幻灯片在开头，中间或结尾处的时间来调整容器的外观。

我知道有一个事件需要监视，但是我不知道如何将类添加到触发该特定事件的容器DOM中，因为同一页面中有多个轮播。我尝试使用this.addClass('reached-end')和$(this).addClass('reached-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>

var cardDeck = new Swiper('.carousel-container', {
  on: {
    reachEnd: function () {
      //add  .reached-end to .carousel-container
      // $(this).addClass('reached-end') // this didn't work
      // this.addClass('reached-end') // this didn't work either
    }
  }
});

Answer 1

从documentation中，您可以看到所有事件都在Swiper实例的范围内运行，而不是代码所期望的容器元素：

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

这样，您将需要在事件处理程序中选择元素。请注意，Swiper为此提供了$el和$wrapperEl属性，具体取决于要定位的父对象。

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

幻灯片到达末尾时，如何在swiper.js中的容器中添加类？

1 个答案: