Horizontal swipe gesture and vertical page scroll

Question

I am building a mobile site and I have a slide show of images that allows sliding through images horizontally. The javascript library I'm using is bxslider. However, if one touches the slide show and wants to scroll the page up/down, the slide show blocks vertical scrolling and hence another section of the site must be touched.

Could someone please tell me how I could keep vertical scroll enabled (i.e, not allow the slideshow to block the normal scroll?)

Thanks!

Answer 1

Try this, Change the onTouchMove fn in the bxslider library to this

        var onTouchMove = function (e) {
        if (slider.settings.mode != 'fade') {
            var orig = e.originalEvent;
            var value = 0;
            // if horizontal, drag along x axis
            if (slider.settings.mode == 'horizontal')
            {   
                var hchange = orig.changedTouches[0].pageX - slider.touch.start.x;
                var vchange = orig.changedTouches[0].pageY - slider.touch.start.y;

                if(Math.abs(hchange)>20 && Math.abs(hchange)>Math.abs(vchange))
                {   
                    value = slider.touch.originalPos.left + hchange;
                    setPositionProperty(value, 'reset', 0);
                    e.preventDefault();
                }
                // if vertical, drag along y axis
            } else{
                e.preventDefault();
                var change = orig.changedTouches[0].pageY - slider.touch.start.y;
                value = slider.touch.originalPos.top + change;
                setPositionProperty(value, 'reset', 0);
            }

        }
    }

Answer 2

If you goto the options page for the bxslider website, search for preventDefaultSwipeX, and preventDefaultSwipeY

Those are what you are looking for.