Add Carousel component

[stunaz]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Add a carousel component to display images

Examples 🌈

• https://github.com/FormidableLabs/nuka-carousel
• https://mui-treasury.com/components/carousel
• https://react-swipeable-views.com/demos/demos/

Motivation 🔦

One of the most asked items in https://material-ui.com/blog/2020-developer-survey-results/#5-how-can-we-improve-material-ui-for-you.

Benchmark

• https://swiperjs.com/demos/
• https://github.com/rcbyr/keen-slider
• https://dequeuniversity.com/library/aria/tabpanels-accordions/sf-carousel
• https://kenwheeler.github.io/slick/
• https://github.com/akiran/react-slick
• https://react-slick.neostack.com/
• http://jumbo-react.g-axon.work/app/components/carousel
• https://bootstrap-vue.js.org/docs/components/carousel
• https://www.jqueryscript.net/slideshow/
• https://github.com/xiaolin/react-image-gallery
• https://ant.design/components/carousel/
• https://www.infragistics.com/products/indigo-design/help/components/carousel.html
• https://dashboardpack.com/live-demo-preview/?livedemo=113
• Add accessible Carousel component chakra-ui/chakra-ui#200
• https://amp.dev/documentation/components/amp-carousel/?format=websites
• https://flickity.metafizzy.co/

[mschipperheyn]

AFAIC the best carousel lib is still https://github.com/nolimits4web/Swiper

[mbrookes]

You can make a passable carousel using the mobile stepper (this is a modified version of the docs example):

https://codesandbox.io/s/material-demo-gq5rk

(The dots could do with a better colours, but I didn't attempt to restyle them.)

There is also: https://mui.wertarbyte.com/#material-auto-rotating-carousel

[tarun1992]

The carousel component is needed for my Application also. Would be great if it comes up in the next release.

[stunaz]

@oliviertassinari How do you prioritize the "waiting for +1", looks like this is the most upvoted for a long time now

[oliviertassinari]

We display the Carousel as part of MUI X in the roadmap, I propose we transfer this issue to MUI X, so the Core team can focus on what has been making it successful so far:

https://mui.com/discover-more/roadmap/#new-components

cc @mui-org/core @mui-org/x for thoughts. This says nothing about the MIT vs. not-MIT aspect of it, but either about if it should be part of Core or X. I would argue X because 1. design is secondary to a Carousel, 2. it's not fundamental to be part of a design system, 3. there are OSS projects only doing carousel.

[joserodolfofreitas]

Makes sense to have the component in MUI-X. A carousel is a fairly advanced component, with multiple kinds of user interactions and behaviours, and possibly a high demand for customisation.

+1 on moving the issue to X.

[oliviertassinari]

@joserodolfofreitas The things that were making me doubt is that:

1. It's for landing pages, not for an enterprise app, e.g. it's not in Kendo-UI. But it's not a design component either.
2. It's frequently requested, but so is the date picker, and we are moving it to X:

• https://getbootstrap.com/docs/5.1/components/carousel/ it's even included in Bootstrap
• https://mui.com/blog/2020/#5-how-can-we-improve-mui-for-you ranked second as the most requested component

It challenges the difference between MUI Core and MUI X. For sure the difference is not about which team has more bandwidth as it's a bull**it argument, have people change teams, and problem solved. So far, the rationale was:

1. Start by adding everything into MUI Core. So by default, everything is inside one MIT npm package.
2. If developers tend to install third-party libraries for it => leaning more toward MUI X.
   It means that they usually don't build it from scratch because it's hard, and they would rather have the cost (dev time) of customization and potential design inconsistency. There Material Design is not the selling argument like it's for MUI Core. People pick react-slick regardless.
3. If's usually not part of the design systems (solving a design problem) => leaning more toward MUI X.
   This is fundamentally different in the notion of what competencies correlate with success. In MUI Core, success was historically mostly about solving visual design problems. 4 years ago, any Material Design library would become a leading UI library, as long as has the best execution in its category (Vue, React, Bootstrap, etc) or there sooner. in MUI X, it's a lot more about UX challenges.
4. It's used to build internal apps and rich apps, more than landing pages => leaning more toward MUI X. Simply because this usually correlates with 2 and 3.
5. If there are no MIT alternatives => leaning more toward MUI X. We can sell enterprise licenses when there are no MIT alternatives. MUI X has the infrastructure for it, MUI Core doesn't.

We can keep iterating on it, added to https://mui-org.notion.site/MUI-Core-vs-MUI-X-b96e01a6239f423e83d01efeaad019fb

[joserodolfofreitas]

I see your points, it's indeed not an easy call.
I admit my considerations were mostly based on what is the item 3 of the above list. And by "high demand for customisation" I didn't mean in a sense of having bandwidth to work on it, but instead that the component is used in various different use cases. Because regarding the nature of the apps using carousel, I see variants everywhere, not only on landing pages but also: on a social media app's timeline, on an e-commerce upselling widget, on a chat's image viewer, on a HR management software, on a rich data driven dashboard, or even on a data analytics tool, and etc.

edit: Landing pages is the majority though, we can't shake that.

[flying-sheep]

There’s also this project: https://github.com/nanxiaobei/react-slide-routes, which implements a popular use case for a carousel-like component.