search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
33.25k stars 1.27k forks source link

[BUG] Carousel examples seems broken in docs #1419

Closed herzog0 closed 1 year ago

herzog0 commented 1 year ago

Bug description

When looking at examples on how to use the Carousel component at the official Daisyui website, I noticed that they seem broken.

System information

Linux Mint 21 Tested web browsers:

Evidence

image (no buttons and broken images)

image (no buttons and broken images)

image (no buttons to change the item)

saadeghi commented 1 year ago

"Carousel show images or content in a scrollable area"
It's not broken because there are no buttons. It simply works with scroll.
the 2 last examples have buttons for changing slides but consider that this is a CSS-only solution and it works with anchor text. If you need more control on buttons, scroll, accessibility or if you want different transition effects, you would need a JS image slider. All daisyUI components are CSS-only and they are optional so you can only use the ones you need, and use plugins or custom styles for anything else.

Let me know if you have any questions.

herzog0 commented 1 year ago

Ooh ok, sorry for the misleading bug then.
I though it was a bug because a few days ago me and my coworkers were exploring the Carousel there and I don't remember the images being that large. Just giving you a feedback as a user, because I was not the only one to think they were broken.
Maybe a small padding and background would solve this.

The biggest problem with the horizontally scrollable carousel is actually that there are no scrollbars in the docs to test them.
I know that there is the keybinding Shift+mouse scroll that will scroll horizontally, but I think it would be nice to either tell that in the docs or provide a scrollbar in the demonstration.

If I can help with that in any way let me know! And thank you for the amazing library!!

saadeghi commented 1 year ago

Scrollbars are another topic but it really depends on the OS.
Some operating systems, show permanent scrollbars for everything. Some only show permanent scrollbars for the page but not for scrollable areas. Some don't show permanent scrollbars for anything by default and they only show scrollbars while we're scrolling and it doesn't take space.

There's no way to unify the this behavior among all operating systems unless we create custom scrollbars. And that's not a good idea either because I think if an OS has a specific way to handle scrolls, it should be the same way in OS interface and the web pages to reduce the confusion of users. We don't want users to learn a new way of scrolling just because they're visiting our site. It should be invisible design in my opinion.

Another OS-specific behavior is the way we can horizontally scroll things. Touch devices are obvious. We just swipe in any direction and it scrolls. Some operating systems support horizontal swipe on the touchpad. Some don't. Some operating systems simulate the horizontal scroll using mouse scroll only when the mouse is on a a horizontally scrollable area. Some operating systems need a combination key to be pressed for horizontal scroll.

It's a mess really. But I think if someone is using an OS, they should already know how scrolls work on their OS.