# Carousel CSS features ## Problem description Carousels are an often used design pattern on the web. They are used in a variety of contexts, from product listing pages to slideshow like content. OpenUI has [explored a range of carousel designs](https://open-ui.org/components/carousel.research/), showing that the specific layout and appearance can vary dramatically. They are also provided by many frameworks as components, however implementing a carousel correctly is complicated and often results in inconsistent and sometimes inaccessible implementations. There are a [variety of problems being solved by carousels](https://css.oddbird.net/overflow/explainer/), which we believe could be provided by a set of CSS features. Developers could then combine these CSS features to create the various designs. CSS-only component libraries could be built to further simplify this process. ### Scroll markers Many carousels have markers or thumbnails which provide convenient navigation and a sense of overall progress through the carousel. For individual items, an author *can* do this manually, though it requires writing extra elements which need to be kept up to date with the items to which they scroll. Script also needs to be used to get the desired scrolling behavior. For dynamically content-sized pages, this can only currently be done with script which generates DOM. By having a way to automatically generate markers, many more advanced UI patterns can be solved in CSS. #### Requirements Scroll markers require the combination of several behaviors: 1. They should scroll to the target on activation, 2. only one of the scroll markers in a group should be active (and focusable) at a time (see [roving tab-index](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)), 3. arrow keys should cycle between the other markers, 4. the correct one is automatically activated as a result of scrolling, and 5. The active marker should be stylable. ### Scroll buttons Many carousels provide buttons for direct navigation to the next / previous item or page of content. While they could create these ` ...
This will be scrolled into view when you click the button
``` Invoker actions are only [invoked](https://open-ui.org/components/invokers.explainer/#terms) on explicit activation, and interest actions are shown [interest](https://open-ui.org/components/interest-invokers.explainer/#terms) on focus or hover. For scroll markers, we want the action to be taken only when the selected marker changes, which occurs on focus navigation within the group, but not on hover. As such, we'd propose adding the `invoke` keyword to the `focusgroup` attribute to allow invoking the `invokeaction` on focusgroup focus changes. E.g. ```html
...
...
...
...
``` Note that this example uses tabindex="-1" to apply the [roving tab index with a guaranteed tab stop](https://open-ui.org/components/focusgroup.explainer/#guaranteed-tab-stop) behavior from focusgroup. This approach implements the navigation behavior, but notably does not explain how scroll markers would track the scroll state and allow styling the active marker.