CODEWITHSUNDEEP
jquerytouch-eventbxslider
Joshc
Joshc

Reputation: 3853

bxSlider touch enabled - disable vertical touch events so only horizontal touch events work

I'm using probably one of my favourite jquery slider plugins: bxSlider

http://bxslider.com/options#touchEnabled

Recently they've updated with some touch enabling for devices. This allows you to scroll your sliders via swiping.

But on my current project, I have a slideshow that takes up the entire width of my website, and when viewing on a device, as I scroll down with my finger, when I reach the the slideshow, I am unable to scroll down the page, and instead the slideshow scrolls left to right.

So my question is, is it possible to disable the vertical touch events so it only works when the scroll is swiped horizontally.

var winnerSlider = $('#slider').bxSlider({

});

I have a fiddle if anyone can help... http://jsfiddle.net/2Fcxw/10/

Scan qr below to view fiddle on device.

enter image description here

Thanks

Upvotes: 7

Views: 28751

Answers (3)

vard
vard

Reputation: 4156

For anyone running into this issue now, preventDefaultSwipeY no longer work in last version 4.2.15 (4.2.1d), see https://github.com/stevenwanderski/bxslider-4/issues/1235#issuecomment-465623162

As the author said, you need to fix line 371 from this:

for (i = 1; i <= slider.settings.maxSlides - 1; i++) {

To this:

for (var i = 1; i <= slider.settings.maxSlides - 1; i++) {

Comment/remove on line 1109:

e.preventDefault();

And change at line 1189 this:

if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) {
  e.preventDefault();
  // y axis swipe
} else if ((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY) {
  e.preventDefault();
}
if (e.type !== 'touchmove') {
  e.preventDefault();
}

To this:

if ((xMovement * 3) > yMovement && slider.settings.preventDefaultSwipeX) {
  if(e.hasOwnProperty('cancelable') && e.cancelable) {
    e.preventDefault();
  }
  // y axis swipe
} else if ((yMovement * 3) > xMovement && slider.settings.preventDefaultSwipeY) {
  if(e.hasOwnProperty('cancelable') && e.cancelable) {
    e.preventDefault();
  }
}
if (e.type !== 'touchmove') {
  if(e.hasOwnProperty('cancelable') && e.cancelable) {
    e.preventDefault();
  }
}

No need to use preventDefaultSwipeY it is set to false by default as MarthyM pointed out in his answer.

Upvotes: 1

MarthyM
MarthyM

Reputation: 1849

var winnerSlider = $('#slider').bxSlider({
    preventDefaultSwipeY: false
});

preventDefaultSwipeY should be exactly what you needed. http://bxslider.com/options#preventDefaultSwipeY

It should be set by default now, so there's no need to declare it.

Tried your fiddle and it seems to be working fine wit the current bxSlider (v4. 1. 2).

Upvotes: 9

Johnny
Johnny

Reputation: 1725

$('#slider').bxSlider({
touchEnabled:false
});

This should work.

Upvotes: 11

Related Questions