packages/react-components/react-carousel/library/docs/Spec.md
Carousel enables users to wrap content in 'cards' that can then be paginated via previous/next or page index navigation buttons.
Include background research done for this component
<Carousel>
<CarouselSlider>
{Cards.map((_cardProps, index) => (
<CarouselCard>
Card {index + 1}
</BannerCard>
))}
</CarouselSlider>
<CarouselNavContainer>
<CarouselNav>{index => <CarouselNavButton/>}</CarouselNav>
</CarouselNavContainer>
</Carousel>
Cards will peek by default when the cardWidth is less than 100% of the viewport width.
The CarouselNavContainer can be condensed, this will center all controls with minimal padding.
The CarouselNavContainer provides multiple valid layouts of the CarouselNavigation. If alternative variants are required, then the individual navigation components can be placed within the Carousel wrapper in any layouts.
The core driver of the API will be context and event callbacks provided via the Carousel component, CarouselCards will register themselves via this wrapper, and the Navigation components will subscribe to any updates that occur. The Carousel itself will only re-render cards that had an active index change.
Carousel provides callbacks on navigation changes, as well as the ability to drive pagination externally via a controlled index.
Carousel is the context wrapper and container for all carousel content/controls. By default it keeps styling minimal, but an appearance prop can be used to apply additional visual treatments such as rounded corners and shadow. Carousel also provides API interfaces for callbacks that will occur on navigation events.
If the carousel is on auto-play, the user may opt into pausing the auto-play feature via the CarouselAutoplayButton which must be present for auto-play to be enabled, this value can be controlled via interaction or the CarouselAutoplayButton props.
A default navigation button that will set value to the next/previous page, driven by it's navType of 'next' or 'previous'.
The defining wrapper of a carousel's indexed content, they can be set to a responsive sizing via autoSize prop, or controlled via CSS.
Clickable actions within the content area are available via mouse and tab as expected, non-active index content will be set to inert until moved to active card. Be sure to set 'cardFocus' on the slider if multiple cards are present at once (not 100% width).
The container for animating and positioning the carousel cards, it should wrap all carousel cards to prevent the controls from affecting layout and responsiveness of card sizing. It is intended to set the 'cardFocus' prop to true if cards are not set to 100% viewport width.
A unified navigation footer with all Carousel navigation components as slots, with the CarouselNav intended to be placed within the root children. It contains variant layouts that are condensed or extended, the nav components can also be used independently.
Enables jumping directly to a card based on index and implements arrow navigation via Tabster. The children of this component will automatically be wrapped in a context to provide the appropriate value based on their index position.
The child element of CarouselNav, a singular button that will set the carousels active index on click.
A variant child element of CarouselNav, a singular image button that displays a preview of card content and will set the carousels active index on click.
Interactive content is expected to be available in logical tab order within DOM, including when a user may place navigation components via absolute positioning (i.e. when overlaid on Carousel content).