I'm using swiper.js for a particular project, for the most part it's ok. However I wanted to adjust the container's look based on the when the slide is at the beginning, middle or at the end.

I know there's an event to watch for it, but I don't know how to add the class to the container DOM that triggered that particular event because there are several carousels in the same page. I tried using this.addClass('reached-end') and $(this).addClass('reached-end'), but it didn't work.

<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
    }
  }
});

I'm using swiper.js for a particular project, for the most part it's ok. However I wanted to adjust the container's look based on the when the slide is at the beginning, middle or at the end.

I know there's an event to watch for it, but I don't know how to add the class to the container DOM that triggered that particular event because there are several carousels in the same page. I tried using this.addClass('reached-end') and $(this).addClass('reached-end'), but it didn't work.

<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
    }
  }
});

• javascript
• jquery
• swiper.js
• idangero

• what do you get if you console.log($(this))? – red house 87 Commented Nov 1, 2018 at 10:59

1 Answer 1

From the documentation you can see that all the events run under the scope of the Swiper instance, not the container element as your code expects:

Please note, that this keyword within event handler always points to Swiper instance

As such, you will need to select the element within the event handler. Note that Swiper provides both $el and $wrapperEl properties for this, depending on exactly which parent you want to target.

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