anita.kcx
anita.kcx

Reputation: 963

bootstrap swipe not working with anchor tag

I am using the TouchSwipe plugin for my carousel swipe effect.

The problem is that swipe does not work when I enclose the image or content within

<a href=""></a>

I tried assigning them z-index but still it does not work.

I even tried their example and tried the same things using inspect element.

http://lazcreative.com/bs3/touchswipe.html

This is the script :-

$('#carousel-example-generic-myslider').swipe( {
    swipeLeft: function() {
        $(this).carousel('next');
    },
    swipeRight: function() {
        $(this).carousel('prev');
    },
    allowPageScroll: 'vertical'
});

Please help.

Thanks

Upvotes: 1

Views: 1857

Answers (1)

Manu M
Manu M

Reputation: 1064

For touchswipe, there is an option 'excludedElements' which is defaulted to "button, input, select, textarea, a, .noSwipe". So 'a' tags will be excluded from the swipe event. You need to remove that 'a' reference from that.

Try this initialization, for eg:

$('#carousel-example-generic-myslider').swipe( {
    swipeLeft: function() {
        $(this).carousel('next');
    },
    swipeRight: function() {
        $(this).carousel('prev');
    },
    allowPageScroll: 'vertical',
    excludedElements: "button, input, select, textarea, .noSwipe"

});

Upvotes: 6

Related Questions