[carousel] Request to explore carousels

[bkardell]

trafficstars

I don't see that anyone has broght this issue yet, but a recent discussion in aria to figure out how to formalize the mess of carousels given how prevalent they are led to (popular, it seems) discussion that this would be an excellent thing for open-ui to explore, beginning with research.

James Craig from Apple (@cookiecrook) even mentioned our spicy sections/design affordance controls concept as potentially interesting here. There is some previous history along this lines with the old panels/panel sets proposal so I agree it's worth both starting research (which I expect will take a while given the state of those is very different than many other controls) and keeping in mind to think about if (eventually) these two concepts align.

[css-meeting-bot]

The Open UI Community Group just discussed [carousel] Request to explore carousels, and agreed to the following:

• RESOLVED: hdv eugene will do initial research for carousels in Open UI

The full IRC log of that discussion

<gregwhitworth> Topic: [carousel] Request to explore carousels
<bkardell_> moving on because we are lacking the people
<gregwhitworth> github: https://github.com/openui/open-ui/issues/405
<gregwhitworth> bkardell_: recent discussions in ARIA to figure out carasels
<gregwhitworth> bkardell_: they exist on the web, maybe unfortunately to some
<gregwhitworth> bkardell_: in that discussion Jaimes Craig mentioned a potential relationship with design affordances
<gregwhitworth> bkardell_: in a much earlier proposal - it was included
<gregwhitworth> bkardell_: it does seem like we should consider carasels, since the data suggests it exists
<gregwhitworth> gregwhitworth: are you asking to work on carousels or someone else to
<gregwhitworth> bkardell_: the latter
<gregwhitworth> bkardell_: we need to have the initial research and can't commit to it
<gregwhitworth> bkardell_: the ask is if Open UI can add that as a component to doing research
<gregwhitworth> bkardell_: thoughts?
<gregwhitworth> bkardell_: it's nice that ARIA is pointing to us
<hdv> q+ to offer myself to research carousels if we decide to do bring this to openui
<gregwhitworth> ack hdv
<Zakim> hdv, you wanted to offer myself to research carousels if we decide to do bring this to openui
<gregwhitworth> hdv: I have not done research in Open UI but am interested in doing it
<gregwhitworth> hdv: If someone can guide me a bit
<gregwhitworth> hdv: what I should be doing
<gregwhitworth> bkardell_: I'd be happy to participate but I can't drive it and do substantial work on it
<gregwhitworth> bkardell_: maybe there is just generally the folks doing tabs
<davatron5000> q+
<eugene> q+
<gregwhitworth> bkardell_: maybe we can somehow do participation in that
<gregwhitworth> ack davatron5000
<gregwhitworth> davatron5000: yeah I think we can take it up in tabvengers
<gregwhitworth> davatron5000: I'm not sure if you were around for the heavier part of tabs but we can go over what we did there
<gregwhitworth> davatron5000: then we can discuss if it's another affordance of a spicy section
<gregwhitworth> q?
<gregwhitworth> ack davatron
<gregwhitworth> ack eugene
<gregwhitworth> eugene: I've been kicking this around in research
<eugene> I've done some work in this space previously - https://docs.google.com/presentation/d/14YOGm4CqYfrLzkqQLhVFjGAkYp-4I3Q6Du7uhwQx6lc/edit#slide=id.p
<gregwhitworth> eugene: happy to do some work here and help out/support
<gregwhitworth> eugene: I'd be leaning on other folks
<gregwhitworth> RESOLVED: hdv eugene will do initial research for carousels in Open UI
<gregwhitworth> end Topic

[mirisuzanne]

This work from @una and @argyleink seems relevant for a CSS-based approach: https://github.com/argyleink/ScrollSnapExplainers/tree/main/css-scroll-marker

[argyleink]

This work from @una and @argyleink seems relevant for a CSS-based approach: https://github.com/argyleink/ScrollSnapExplainers/tree/main/css-scroll-marker

nice thanks, we're definitely looking to see how we can support developers making carousels with snap-points. would love more eyes on the explainers and ideas 👍🏻

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[lukewarlow]

Existing OpenUI design systems:

Ant - https://ant.design/components/carousel Bootstrap - https://getbootstrap.com/docs/5.3/components/carousel/ Lightning - https://www.lightningdesignsystem.com/components/carousel Material Design - https://m3.material.io/components/carousel/overview Material UI - https://mui.com/material-ui/react-stepper/#text-with-carousel-effect and https://mui.com/joy-ui/react-aspect-ratio/#mobile-carousel Fluent UI (formerly Stardust UI) - https://fluentsite.z22.web.core.windows.net/0.66.2/components/carousel/definition Tailwind Elements - https://tailwind-elements.com/docs/standard/components/carousel/ WAI-ARIA - https://www.w3.org/WAI/ARIA/apg/patterns/carousel/, https://www.w3.org/WAI/tutorials/carousels/ and https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/ (multiple links as the implementations differ)

Other systems I've found just to provide more examples:

https://developer.apple.com/documentation/tvml/carousel https://design.bristol.gov.uk/docs/components/carousel/ https://developer.semrush.com/intergalactic/components/carousel/ https://coreui.io/react/docs/components/carousel/ https://vuetifyjs.com/en/components/carousels/ https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/carousel.html?lang=en https://support.google.com/webdesigner/answer/3195037?hl=en-GB&ref_topic=7313207&sjid=6621489897297002081-EU https://support.google.com/webdesigner/answer/7495660?hl=en-GB&ref_topic=7313207&sjid=6621489897297002081-EU

[github-actions[bot]]

There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.

[argyleink]

updates:

• relevant CSSWG issue https://github.com/w3c/csswg-drafts/issues/9745
• @flackr explainer https://github.com/flackr/carousel