feat(carousel): Carousel component in Angular Material

[KinokoF]

Feature Description

Overview

This feature request proposes adding a Carousel component to the Angular Material library. The Carousel would allow users to browse through a collection of items in a horizontal sliding interface.

Problem Statement

Angular Material currently lacks a dedicated Carousel component, forcing developers to:

• Implement custom carousel solutions
• Rely on third-party libraries that may not adhere to Material Design principles
• Create inconsistent user experiences across applications using Angular Material

This gap in the component library leads to fragmentation in the ecosystem and requires teams to invest development time in solving a common UI pattern that should be standardized.

Proposed Solution

Introduce a new mat-carousel component that follows Material Design guidelines while providing a flexible, accessible, and performant implementation for displaying sequential content.

References

• Material Design Carousel component

Use Case

• Image galleries
• Product showcases
• Feature highlights
• Testimonial displays
• News/article previews
• Stories feed
• Content onboarding flows

[KinokoF]

Searching on GitHub I found several issues that demonstrate the community's interest in this feature over time:

• 2015: Carousel material#4413
• 2015: Media gallery directive material#4701
• 2016: Carousel like directive for angular material material#7282
• 2016: Carousel Request material#8338
• 2016: featueDiscovery: implement to MD components material#8516
• 2016: carousel is missing in whole library.. material#8798
• 2016: Request for feature: Carousel #1081
• 2017: feature request #4337
• 2017: My suggestion to add one more option is Carousel (Slideshow) #4793
• 2017: Image carousel component #5671
• 2017: angular carousel #5693
• 2017: [Feature Request]: card carousel #6626
• 2018: No carousel component is present #14661
• 2019: Angular Material - Basic Carousel #17437
• 2021: Material Carousel #23424
• 2022: carousel slider need #24649
• 2024: Add better carousel effect #28427

Reading these issues it turns out that in the past Material Design did not include the Carousel component.

However, this component was included in March 2023 and refined in October and December 2023.

Maybe the time is ripe to include it on Angular Material too?

[sadmozer]

+1 however I think it is not trivial to implement the behavior of that component (I am referring primarily to animations).

In any case, another very common use case, which we encounter for example in social apps, is the stories feed.

[crisbeto]

If I remember correctly, the main reason we didn't want to do it in the past was that it's hard to get the accessibility right in a carousel.

[KinokoF]

I understand, and agree that it would be really challenging to implement good accessibility. But, in my opinion, challenging does not mean impossible!

[wikylyu]

Carousel is a very common UI component, and I think many people will need it.