FlexSlider with Woocommerce: prevent vertical swipe touch on horizontal sliders

Question

with WooCommerce 4.2, on iOS, FlexSlider (v2.7.2) show a bug with a horizontal slider: when the focus is on the slider as the user swipes left or right, the vertical scroll is still active, there is some level of vertical movement. That makes the slider "rebound".

You can see the bug in this video: https://youtu.be/bM8zcv3ciTo

EDIT: My question is similar to this one, but related to Flexslider.

I have this in functions.php:

/*PRODUCT PAGE FlexSlider Options*/
add_filter( 'woocommerce_single_product_carousel_options', 'filter_single_product_carousel_options' );
function filter_single_product_carousel_options( $options ) {
    if ( wp_is_mobile() ) {
        $options['controlNav'] = true; // Option 'thumbnails' by default
        $options['direction'] = "horizontal";
        $options['slideshow'] = false; // Already "false" by default
    }
    return $options;
}

Any idea how to prevent this vertical scroll while the focus is on the Flexslider?

Anybody also has this bug?

I installed a test site with only Wordpress and WooCommerce, and the bug is here, so it's not plugin-related: http://woo.makemy.biz/produit/produit-de-test/

Beeck

Your embedded video doesn't load… Now the only value that you are changing is for controlNav… did you tried to add the option $options['smoothHeight'] = true;… you can look to jquery.flexsider.js included in WooCommerce where you have all settings at the end of the js code. – Bis

I updated the video link. Thanks @Bis I'll try other options and let you know. – Beeck

anyone else see this bug ? – Beeck

Has this been resolved? If so, and my answer was helpful to you, please mark it as "Accepted". Otherwise, if you'd like some more clarification, just say so. – Niela

Answer 1

Edit: Adapting the owl carousel solution would result in code that looks like this:

//You should replace ".myFlexslider" with an appropriate class.

jQuery('.myFlexslider').data('flexslider').vars.before = function(){
    jQuery('body').css('overflow', 'hidden');
};
jQuery('.myFlexslider').data('flexslider').vars.after = function(){
    jQuery('body').css('overflow', '');
};

which should work. https://codepen.io/Terrafire123/pen/YzWRXOJ

It's not possible to do this via PHP, because PHP doesn't expose the API necessary to do this.

You should know, that preventing vertical scroll when the slider swipes is usually discouraged because this can result in the slider being annoyingly difficult to scroll past.

---

---

Original answer: The fact that the issue seems to occur with both Flickity and Flexsider seems to indicate that it isn't a problem with either one, but rather with the user.

A careful review of the Youtube video you have seems to indicate it's working correctly, and there is no real bug. Every time the slider doesn't move in your video, it's because

a. He's sliding vertically, not horizontally, or

b. He's sliding in a direction he can't slide because loop is disabled and he's at the first element.

The rebound effect is normal when you scroll to the top of the page in iOS. If desired, you can disable the bouncing effect with a workaround like this:

html {
  position: fixed;
  height: 100%;
  overflow: hidden;
}

body {
  width: 100vw;
  height: 100vh;
  position:relative;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

Niela