javascript - How to add a class to the container in swiper.js when slide has reached the end? - Stack Overflow

admin管理员组

文章数量:1023782

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

Share Improve this question Follow edited Nov 1, 2018 at 11:04 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Nov 1, 2018 at 10:58 ArtvaderArtvader 95855 gold badges1616 silver badges3232 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

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

Share Improve this question Follow edited Nov 1, 2018 at 11:04 Rory McCrossan 338k4141 gold badges320320 silver badges351351 bronze badges asked Nov 1, 2018 at 10:58 ArtvaderArtvader 95855 gold badges1616 silver badges3232 bronze badges 1

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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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

本文标签： javascriptHow to add a class to the container in swiperjs when slide has reached the endStack Overflow