Woodmart Carousels/Sliders – Stop scrolling

This topic has 9 replies, 3 voices, and was last updated 3 years, 10 months ago by Artem Temos.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
January 12, 2021 at 1:18 pm #257702

lucablight2
Participant

Hello,
How to stop page scrolling up and down when using woodmart carousels/sliders ?

When using your carousels/sliders the page is not blocked from up and down movement and this is so so bad from user experience…

Is there any way to block that up/down movement when using carousels/sliders ?
Just like native wordpress slider – when swiping left/right there is no movement up/down.

January 12, 2021 at 2:20 pm #257725
Artem Temos
Keymaster
Hello,

Try to add the following code snippet to the Custom CSS area in Theme Settings to fix this issue.
```
.owl-carousel
{
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}
```
Regards
January 12, 2021 at 2:58 pm #257739
lucablight2
Participant
Hello Artem,
That code did not helped.
```
.owl-carousel
{
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}
```
January 12, 2021 at 3:14 pm #257748

Artem Temos
Keymaster

We have tested this and it works well on mobile phones. Please, try to clear your browser cache and check again.

January 12, 2021 at 4:14 pm #257767

lucablight2
Participant

Well I have cleared browser and wp cache and it doesn’t work.
I mean when I 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.

Video for clarification in private content.(It takes a while when it is available)

PS. Native wp slider doesn’t go up and down at all – even when doing super fast swipes.

January 13, 2021 at 7:24 am #257910

Bogdan Donovan
Keymaster

Hi,

We have provided you with the same scroll fix for OWL carousel that used in swiper (elementor) carousel and there is no other way to change it behaviour. After code was applied we have tested following carousel scroll in Android and iOS devices, and it’s working normal for us.

Here is example video from iPhone 12 Pro:
https://drive.google.com/file/d/1asa-NTOfEorRY5WVuU-peczFd7klvJIf/view?usp=sharing

Best Regards

January 14, 2021 at 12:32 pm #258386

lucablight2
Participant

Hello Bogdan, thank you for your reply.
So yeah it works when you click it and swipe directly in line right/left.
The issue I see here is that when you swipe with a little bit of angle it crashes.
Nowodays 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 here. More info with comment in the video below.

(PS. the banner carousel doesn’t have this issue, even with a little bit of angle it swipes perfect).

https://drive.google.com/file/d/1AQjwFZnKtFvtrSzKWaPk6LYjfeKuz0wT/view?usp=drivesdk

January 14, 2021 at 1:24 pm #258411

Bogdan Donovan
Keymaster

Hi,

Default Elementor widgets and Woodmart widgets is using different carousel libraries. Elementor is using Swiper. Woodmart is using OWLcarousel. Unfortunately the following behaviour can’t be changed and carousels can’t be identical since their libraries are differ in their structure.

Best Regards

January 14, 2021 at 1:34 pm #258414

lucablight2
Participant

Hi,
Well that’s disappointing.
From user experience this is major issue…
I mean it works, but that kind of stuff is outdated.
Do you plan to solve this problem in future ?

January 14, 2021 at 11:41 pm #258420

Artem Temos
Keymaster

Hello,

Unfortunately, we are not able to solve it at the moment since it is not bug but is how the JS library developed. The only solution here would be to change the library completely. We will consider this in the future but can’t guarantee that it would be implemented soon.

Kind Regards
Author

Posts