Hi Support Team,
I’m using Elementor with the WoodMart theme and have encountered a UX issue with the carousel (both product and image sliders) on mobile devices.
I really appreciate how Nike’s official website handles carousels:
On the first slide, there’s about 20px of spacing on the left and no spacing on the right — clearly suggesting that the user can swipe right for more content.
On the last slide, there’s no left spacing and about 20px of right spacing, which makes it clear the user has reached the end.
However, in my setup with WoodMart’s carousel (showing 1.25 items), both sides have spacing by default.
I tried applying padding-right: -20px to remove the right spacing, which worked. But the left side still retains the 20px spacing, even when I’ve reached the last item. This results in an awkward experience compared to Nike’s clean behavior.
What I’m trying to achieve:
The first item has left spacing only;
The last item has right spacing only;
During scrolling, 1.25 items are visible;
The slider scrolls freely (non-snap), smoothly with finger gestures.
Is there any built-in setting in WoodMart to achieve this? Or would you recommend a workaround via custom CSS or JS?
Thanks a lot for your support!
Attachments:
You must be
logged in to view attached files.
.
