How to fix awesome-swiper bug?

Question

Vue.js

There is a slider on each slide there is a click event. I noticed such a bug that there is a swipe from 1 to 3 and click, i.e. from the first to the last, then the penultimate (2) is not displayed and the click does not work on the last slide (3). and the same bug in the opposite direction if from the last (3) to the first (1).


With what can be connected?
ps I can’t change the slider to another, it will be more problematic to do this, I would like to find a solution for this case.

Answer 1

This component is just a wrapper over the actual swiper. Which, to create an infinite scroll, makes copies of the slides (last, penultimate, etc. before the first; first, second, etc. after the last). When copying an element, event handlers are not copied (except for inline ones, but, obviously, this is a different case). Hence the "click doesn't work" - when you click on a cloned slide.
Delegate event handling. The click handler will be one, and attached to the root element of the slider:

methods: {
  onClick(e) {
    const slide = e.target.closest('.swiper-slide');
    if (slide) {
      console.log(`slide ${slide.dataset.swiperSlideIndex} clicked`);
    }
  },