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

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

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


С чем может быть связано?
p.s. поменять слайдер не могу на другой, точнее проблематично это сделать будет, хотелось бы найти решение для данного случая.
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Этот компонент - всего лишь обёртка над собственно 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 Куратор тега JavaScript
Вообще-то он вовсе не "awesome", а заброшенная хрень как и 99.99% ему подобных. Как только от слайдера надо чуть больше, чем просто листать, они садятся в лужу, особенно когда нужны правильные колбеки.

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

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

Войти через центр авторизации
Похожие вопросы
Zoon Москва
от 150 000 до 300 000 руб.
от 80 000 до 160 000 руб.
Star-staff Москва
от 100 000 до 150 000 руб.
16 окт. 2019, в 12:21
2500 руб./за проект
16 окт. 2019, в 11:52
250 руб./в час