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.


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