Bugfix: Carousel Swiper Styling & Direction

[jsonMartin]

📑 Description

This PR fixes the custom Carousel styling which was lost when adding swiper component by re-adding custom imgCls and slideCls.

This PR also inverts the order of the carousel swiper direction to match expected behavior from other swiping libraries such as SwiperJS (swipe from left->right to go back, right->left to go forward).

See: #965

Status

• Not Completed
• Completed

✅ Checks

• My pull request adheres to the code style of this project
• All the tests have passed
• My pull request is based on the latest commit (not the npm version).

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-svelte	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 30, 2023 10:42pm
flowbite-svelte-update	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 30, 2023 10:42pm

[shinokada]

On an iPad, swiping works but all buttons don't work. Can you have a look at it?

[jsonMartin]

So I don't have a physical iPad to test with @shinokada, but I was able to reproduce in Chrome & Safari browser emulator. It also appears that it's not just the iPad, but the buttons are not working on any mobile device (including my Pixel Android phone).

Looks like the problem is caused on mobile devices because preventDefault is being called in the onDragStart function, which prevents the click handler from bubbling up to trigger the button press (which would be the native browser behavior). It appears that tap gestures are lost all together because the current code only handles touch events which are over the drag threshold.

I was able to fix this by saving the original browser event when the user first touches and then manually issuing "tap" gesture click handling if under the drag threshold (thus considered a "tap" instead of a "drag").

Tested working in iPad Browser Emulator in Chrome/Safari and on actual Pixel phone

[shinokada]

Thanks for the fix.