Feature

Add other carousel components that have already some custom styling/behaviour, such as stacked cards, thumbnails, etc.

Context

All components exported by the library now have minimal styling. In fact, the added style is mainly for transitions, so the user should add custom style based on their own needs. It would be a good feature to have other custom components already available for the user, while still giving them ability to customize them further.

Examples

Some "variants" examples:

• Splide
• React Native Snap Carousel
• UI Initiative catalog (many advanced templates)

How to start

• Start thinking which of the examples would be a good addition, or even some different "variant".
• The code for the library core is in the packages/core folder.
  • Maybe you'll want to take a look at how we are handling the transitions in the src/internal/hooks/useSlideStyle.ts file.

Feature

Add a component to display the carousel progress

Examples

Splide - Carousel Progress

How to start

The library core code is in the packages/core folder, and the components that are exported by the library are in the src/components folder. See the index file to understand how they are exported.

Feature

Enhance the homepage, by adding more examples of carousels and features of the library

Context

Currently the homepage is fairly simple, and it would be nice to have more information upfront of what the library is capable of.

Examples

We can take a look at other known libraries, such as Swiper, Slick, Splide and Flicking.

How to start

The documentation website is inside the apps/docs folder, and it's built with Starlight (which is based on Astro).
The homepage is the src/content/docs/index.mdx file.

Note: It would be nice to also update the pt-br version

Feature

Add a documentation page to explain the accessibility (a11y) concepts used in the library

Context

There are many components of the library that use some a11y attributes, and it would be interesting to explain what and why we are defining them, as well as giving more hints to the user enhance even more the a11y.

How to start

Take a look at these components:

• CarouselRoot
• CarouselWrapper
• CarouselSlide
• CarouselPlayPauseButton
• CarouselPaginationItem

And also at the ARIA Authoring Practices Guide on Carousels

Feature

Add more transitions effects to the library like flip and cube

Examples

The Swiper library has some demos of different transitions.

How to start

The transitions are all being done via CSS, and currently the src/components/internal/hooks/useSlideStyle.ts is the file responsible for handling the transition styles.