Woodmart – How to stop page scrolling up and down when using carousels and Owl?

Owl Carousel, which is used as JS library in Woodmart WordPress Theme is scrolling vertically when using swipe for carousel on mobile, especially in iOS.

Nowadays phones are big and when holding in one hand, it’s hard to do swipe exactly in x axis, there’s always a little angle.

When you do it slowly and press directly on one of the carousels items it works, but when swiping fast like a typical user it goes up and down.

Our solution to this not so good experience with Owl is а simple “delay” of 50 px, before beginning to scroll vertically. This adds a little more “tolerance” to your fingers when scrolling horizontally 😉

To prevent this behaviour, here is a little hack to Owl Carousel:

1. Hope you are using a child theme. If not, please ask Google how to activate it.
2. Create new folder scripts in your child theme folder.
3. Create new owl-custom.js file in the same folder.
4. Paste the code below in the owl-custom.js file:

var startX, startY;
jQuery('.owl-carousel').on('touchstart', function(e) {
jQuery('.owl-carousel').css('touch-action', 'none');
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
});

jQuery('.owl-carousel').on('touchmove', function(e) {
var thisCarousel = jQuery(e.currentTarget)
var deltaX = e.touches[0].clientX - startX,
deltaY = e.touches[0].clientY - startY;
if (deltaY >= 50 || deltaY <= -50 ) {
thisCarousel.css('touch-action', 'pan-y');
thisCarousel.css('-ms-touch-action', 'pan-y');
} else {
thisCarousel.css('touch-action', 'none');
thisCarousel.css('-ms-touch-action', 'none');
}
});

5. In your functions.php into the child theme folder, add the function below:

/* Custom script with jQuery as a dependency, enqueued in the footer */
add_action('wp_enqueue_scripts', 'owl_carousel_custom_js');
function owl_carousel_custom_js() {
wp_enqueue_script('custom', get_stylesheet_directory_uri().'/scripts/owl-custom.js', 
array('jquery'), false, true);
}

Hope this helps you guys, and hope the great team behind Woodmart to replace asap the Owl library.

2 Comments

  • Bas Rijnen каза:

    Hi there, does this still work?

    I tried it with the identical steps above, but it did not solve the issue. I’m desperate to fix this terrible UX issue

    Thanks in advance

    • RIZN каза:

      Hi Bas,
      It depends on your theme and customisations… In our case it worked well.
      Additionally you can disable Disable OWL Carousel script on mobile devices, it’s an option in Theme Settings -> Performance -> JS tab. When OWL it’s disabled on mobile devices it’s use the native browser scroll and behaves great.
      Hope this helps 😉

Коментирай

Твоят имейл остава защитен и няма да бъде публикуван никъде.