Как использовать iDangerous Swiper и jquery .click(); в то же время

Я застрял на следующем:

Я использую плагин iDangerous Swiper, который отлично работает. Тем не менее, я также хотел бы использовать функцию щелчка jQuery для того же iDangerous swiper.

Например:

<div id="swiper-container">
 <div class="swiper-slide">(lots of stuff here)</div>
 <div class="swiper-slide">(lots of stuff here)</div>
 <div class="swiper-slide">(lots of stuff here)</div>
 <div class="swiper-slide">(lots of stuff here)</div>
</div>

а также :

$('.swiper-slide').click(function() {
//more functionality here
}

Проблема в том, что смахивание ползунка также вызывает jquery .click. Это довольно плохо, потому что в моем случае функция внутри .click загружает другую страницу.

Однако использование простых html-ссылок работает. Однако это не решает мою проблему, потому что я хочу, чтобы следующая страница загружалась незаметно (без загрузки в адресной строке).

Кто-нибудь знает, как предотвратить запуск вышеуказанного кода jQuery при использовании ползунка?

Заранее спасибо :)


click jquery swiper
person Frank    schedule 25.05.2014    source источник
comment
Можете ли вы добавить событие клика к элементу внутри слайда, а не к самому слайду?   -  person cjspurgeon    schedule 27.05.2014

Ответы (3)


arrow_upward
4
arrow_downward

На данный момент нет прослушивателя onClickSlide, но есть onClick, что круто, потому что дает вам больше гибкости, например, если вы хотите знать не только, какой слайд был нажат/нажат, но и какой элемент внутри слайда:

Основные функции:

var swiper = new Swiper(container, {
    direction: 'horizontal',
    loop: true,
    onClick: (swiper, event) => {
        let div = swiper.clickedSlide; //slide that was clicked
    }
});

Расширенная функциональность:

var swiper = new Swiper(container, {
    direction: 'horizontal',
    loop: true,
    onClick: (swiper, event) => {
        let element = event.target;
        //specific element that was clicked i.e.: p or img tag 
    }
});
person Tomasz Mularczyk    schedule 29.12.2016

arrow_upward
4
arrow_downward

В конце концов я нашел решение. Судя по всему, у iDangerous Swiper для этого есть свой callback (OnClickSlide). Подробнее здесь http://www.idangero.us/sliders/swiper/api.php< /а>

person Frank    schedule 09.06.2014
comment
они отказались от этой функции? теперь задокументирован только обратный вызов onClick: idangero.us/swiper/api/#parameters - person maciek; 05.10.2016
comment
@maciek посмотри мой ответ, если он все еще актуален для тебя. - person Tomasz Mularczyk; 29.12.2016

arrow_upward
1
arrow_downward

Попробуйте этот код:

$('.swiper-slide').click(function(event) {
    event.preventDefault();
    //more functionality here
});

Скорее всего, у вас будет тег a в слайде, и вы должны предотвратить нажатие href.

person Lorenzo Magon    schedule 03.06.2014