Как добавить класс в контейнер в swiper.js, когда слайд достиг конца?

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

Из документации видно, что все события выполняются в рамках экземпляра Swiper, а не элемента контейнера, как ожидает ваш код:

Обратите внимание, что это ключевое слово в обработчике событий всегда указывает на экземпляр Swiper

Таким образом, вам нужно будет выбрать элемент в обработчике событий. Обратите внимание, что Swiper предоставляет для этого свойства $el и $wrapperEl, в зависимости от того, на какого именно родителя вы хотите нацелиться.

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