Swiper Touch Events - включить щелчок, но отключить перетаскивание

Я использую слайдер Swiper 3.4.2 с большими пальцами в качестве слайдера для нумерации страниц. И мне нужно отключить перетаскивание ползунка нумерации страниц, но включить события щелчка, чтобы можно было изменить основной ползунок, щелкнув большие пальцы в ползунке нумерации страниц.

    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 0,
        slidesPerView: 'auto',
        shortSwipes: false,
        slideToClickedSlide: true,
        preventClicksPropagation: false,
        preventClicks: false
    });

Установив simulateTouch на false, я также теряю событие касания щелчка.


slider touch drag swiper
person Mladen Janjetovic    schedule 22.05.2017    source источник

Ответы (3)


arrow_upward
11
arrow_downward

Установка touchRatio: 0 отключит событие касания перетаскивания и оставит событие касания щелчка включенным.

Обновление с версии 4

allowTouchMove: false,
person Mladen Janjetovic    schedule 22.05.2017
comment
По какой-то причине noSwiping и onlyExternal у меня не работали, но это сработало. Спасибо. - person Chris Hayes; 31.01.2020

arrow_upward
10
arrow_downward

Начиная с версии 4.0, вы можете использовать:

allowTouchMove

Если false, то единственный способ переключить слайд - использовать внешние функции API, такие как slidePrev или slideNext.

person Akos Hamori    schedule 18.11.2019

arrow_upward
2
arrow_downward

Вы также можете использовать touchRatio в точках останова:

breakpoints: {
    600: {
        slidesPerView: 1,
        spaceBetweenSlides: 30,
        touchRatio: 1
    },
    768: {
        slidesPerView: 2,
        touchRatio: 0
    }
},
person Мар'ян Косаняк    schedule 05.10.2020