@pilolin
HTML программист

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

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


С чем может быть связано?
p.s. поменять слайдер не могу на другой, точнее проблематично это сделать будет, хотелось бы найти решение для данного случая.
  • Вопрос задан
  • 761 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Этот компонент - всего лишь обёртка над собственно swiper'ом. Который для создания бесконечной прокрутки делает копии слайдов (последнего, предпоследнего и т.д. перед первым; первого, второго и т.д. после последнего). При копировании элемента обработчики событий не копируются (кроме инлайновых, но, очевидно, тут другой случай). Отсюда "клик не срабатывает" - когда вы кликаете по клонированному слайду.

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

<swiper @click="onClick"

methods: {
  onClick(e) {
    const slide = e.target.closest('.swiper-slide');
    if (slide) {
      console.log(`slide ${slide.dataset.swiperSlideIndex} clicked`);
    }
  },
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08
Вообще-то он вовсе не "awesome", а заброшенная хрень как и 99.99% ему подобных. Как только от слайдера надо чуть больше, чем просто листать, они садятся в лужу, особенно когда нужны правильные колбеки.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы