Как исправить баг awesome-swiper?

Question

[Алекс]

Есть слайдер на каждом слайде есть событие клика. Заметил такой баг что есть свайпнуть с 1 на 3 и нажать, т.е. с первого на последний то предпоследний(2) не отображается и клик не срабатывает по последнего слайду(3). и такой же баг в обратную сторону если с последнего (3) на первый (1).


С чем может быть связано?
p.s. поменять слайдер не могу на другой, точнее проблематично это сделать будет, хотелось бы найти решение для данного случая.

Answer 1

[0xD34F]

Этот компонент - всего лишь обёртка над собственно swiper'ом. Который для создания бесконечной прокрутки делает копии слайдов (последнего, предпоследнего и т.д. перед первым; первого, второго и т.д. после последнего). При копировании элемента обработчики событий не копируются (кроме инлайновых, но, очевидно, тут другой случай). Отсюда "клик не срабатывает" - когда вы кликаете по клонированному слайду.

Делегируйте обработку событий. Обработчик клика будет один, и прицеплен к корневому элементу слайдера:

<swiper @click="onClick"

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

Answer 2

[profesor08]

Вообще-то он вовсе не "awesome", а заброшенная хрень как и 99.99% ему подобных. Как только от слайдера надо чуть больше, чем просто листать, они садятся в лужу, особенно когда нужны правильные колбеки.

Тебе сюда https://swiperjs.com/, подключаешь как js модуль и юзаешь, в проекте на vue проблем быть не должно, разве что следи за жизненным циклом компонента и вырубай слайдер, когда компонент дохнет, чтоб не плодились в памяти, либо забей на это как 99%.

Comments

[FuckingSlaves]

Да вью сам кого хочешь перетрет и слайдер этот тем более, только если не инициализировать его заново каждый раз по событию updated и тогда он порсто даст ёбу от наложенных событий, вобщем он не совемстим с вью 2 от слова совсем

[profesor08]

FuckingSlaves, явный пример непонимания как работает vue и его жизненный цикл компонентов.