Swiper: Swiper pagination selects wrong slide on click

[Sidstumple]

This is a (multiple allowed):

• [x] 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.

[nolimits4web]

Would be good to see live example or JSFiddle with pure Swiper.js, because issue can be in that Vue Awesome Swipet plugin

[Sidstumple]

I reproduced it without Vue, and I'm afraid you're right and it's a vue-awesome-swiper problem, their issues though are mostly in --I'm guessing-- Chinese🙈. I'll make an issue there, thanks for your help

[ohenepee]

@nolimits4web Is this library the same as swiper.com.cn in anyway... bcoz I'm a little confused as to the relation, since vue-awesome-swiper is based on swiper.com.cn

[vagari]

@ohenepee Are you joking? "Based on swiper.com.cn?" That site is a clone. With spam links in the footer. And the install steps include an option of...

meteor add nolimits4web:swiper

They're literally pointing at this library.

[ohenepee]

@vagari Yeah the redirection to that meteor package and a few others is where I kinda got confused.

BTW I mean "Based on swiper.com.cn's version since it explicitly refers to it in its repo

[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?

[wilcoxmd]

I get the same issue when clicking the pagination bullets. Anyone find a solution yet?

[udidol]

same issue

[Ritural]

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

Mentioned on a Swiper issue here