-
-
Notifications
You must be signed in to change notification settings - Fork 32.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[joy-ui] Add Carousel component #33392
Comments
Hey there @Rafcin, thanks for opening up the issue! I labeled it as Also, any benchmarks you'd recommend to checkout? |
@danilo-leal Sure I'll set it all up in a sandbox when I get the chance! At the moment the carousel is really funky, I'm going to spend the next few hours on it, I'll come back with a stable version as soon as I can! |
So I smashed my head against my desk for a good day now, and I came up with this. https://codesandbox.io/s/mui-carousel-proposal-c8m0rs?file=/Carousel/index.tsx It's a hook called There is also an additional component called Slide that uses I haven't fully tested this although it's kind of starting to look like what I want it to be!
|
It should allow for some freedom, with next and previous coming from the hook it's much easier to implement your own carousel buttons as opposed to having them overlayed on the left and right. If anyone has any feedback I would greatly appreciate it, optimizations, best practices, etc, I would really like to try to get a carousel into Mui so other developers have more in their arsenal! |
Update. I changed it around a bit. Now the component is a carousel component and a useCarousel hook. |
I think this solution is much better, the Carousel object itself is quite simple and honestly lets users decide how they want to handle the navigation aspect. Included is the hook that takes the ref and lets you move forward, back, etc. I'm already making a slightly different hook with better functions but I think the carousel and hook idea might be good. It's no swiper JS but it's simple and I think the CSS snap feature is great for most use cases! |
Same as mui/mui-x#3601? The issue was initially on MUI Core, but I transferred it to MUI X per https://mui-org.notion.site/X-FAQ-c33e9a7eabba4da1ad7f8c04f99044cc. |
Still does not have a native carousel? Bruh |
I could really use a carousel from MUI. Y'all drowning in tech debt or something? |
Duplicates
Latest version
Summary 💡
@siriwatknp @danilo-leal
So standard Material UI doesn't provide any carousel component out of the box, however after playing around with the new Joy UI components I started writing a CSS snap carousel component that could possibly be useful for Joy. The idea partially stems from the Google news feed and a few other apps I commonly use.
I'll provide the src files below as this isn't a ready component in any way, it still doesn't have the forward back scroll functions in place, a lot of the type names need to be fixed, and I'm unsure if the virtual library I use is appropriate for this. It definitely needs a bit of work but I'd be really happy to hear people's thoughts on how a carousel component should be designed.
BUGS
So far the only bug I've run into is when you scroll to the last element, the first element in the list beings to render, then disappear in a loop. I honestly don't know if virtual makes sense for this, however major carousel libraries have this kind of support and there are cases where it could be needed. Perhaps you are rendering a gallery then it could make sense to have, images that wouldn't all be loaded at once, etc.
NOTES
There is also a prop called isSSR to switch between standard rendering and using the virtual hook (@tanstack/react-virtual), I still need to devise a solution to allow users to programmatically scroll regardless of the method used.
(Also the file structure is slightly dif from MUI. Would be fixed later.)
Index
Carousel Root w/ Virtual Hook
Types & Classes
Types & Classes
Styles
Carousel Style
Examples 🌈
I still need to move all this to its own sandbox.
Motivation 🔦
It looks to me as if Joy might be the next big thing for MUI and I would like to attempt to provide useful components so that other developers will be able to make cool things!
The text was updated successfully, but these errors were encountered: