Swiper pagination selects wrong slide on click

This is a (multiple allowed):

• bug

• enhancement

• feature-discussion (RFC)

• Swiper Version: EXACT RELEASE VERSION OR COMMIT HASH, HERE.

• Platform/Target and Browser Versions: PLATFORM CLIENT YOU ARE TARGETING SUCH AS macOS, Windows, CORDOVA, IOS, ANDROID, CHROME, ETC.

• Live Link or JSFiddle/Codepen or website with isssue: PREFERABLY (IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP).

What you did

I am using vue-awesome-swiper in my vue/nuxt project. I added pagination like this:

pagination: {
  el: '.swiper__paging',
  type: 'bullets',
  bulletClass: 'swiper__paging-number',
  bulletActiveClass: 'swiper__paging-number--active',
  clickable: true,
  renderBullet: function (index, className) {
    return '<h5 class="number-'+ (index + 1) + ' ' + className + '"' + 'index="' + (index + 1) +'">' + (index + 1) + '</h5>';
  }
},

All settings:

homepageSwiperOptions: {
    slidesPerView: 1,
    resizeReInit: true,
    direction: 'vertical',
    spaceBetween: 100,
    wrapperClass: 'swiper__wrapper',
    fadeEffect: {
    crossFade: true
  },
  grabCursor: true,
  navigation: {
    nextEl: '.icon--next',
    prevEl: '.icon--prev'
  },
  pagination: {
    el: '.swiper__paging',
    type: 'bullets',
    bulletClass: 'swiper__paging-number',
    bulletActiveClass: 'swiper__paging-number--active',
    clickable: true,
    renderBullet: function (index, className) {
    return '<h5 class="number-'+ (index + 1) + ' ' + className + '"' +  'index="' + (index + 1) +'">' + (index + 1) + '</h5>';
  },
  breakpoints: {
    960: {
      direction: 'horizontal'
    }
  }
}

Expected Behavior

Pagination by clicking on a number

Actual Behavior

Swiper pagination selects wrong slide on click Very buggy:

P.S. Remember, an issue is not the place to ask questions. You can use Stack Overflow for that.

Before you open an issue, please check if a similar issue already exists or has been closed before.

[Ritural]

Adding touchEventsTarget: 'wrapper' as a swiper option seemed to fix it for me 😃

Mentioned on a Swiper issue here

[avilesasturias]

Got the same issue with this bullets/dots jumping to the wrong slide when using the normal js version of swiper. This is from Swiper’s demo page: https://idangero.us/swiper/demos/110-slides-per-view.html Just click randomly around the bullets and at some point it will start to jump to wrong slide. Any help or fix on this?