Skip to content

[Feature] Native CSS Carousel Support (Chrome 135+) #514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ismail9k opened this issue May 22, 2025 · 0 comments
Open

[Feature] Native CSS Carousel Support (Chrome 135+) #514

ismail9k opened this issue May 22, 2025 · 0 comments
Assignees
Labels
🌟 feature request New feature or request

Comments

@ismail9k
Copy link
Owner

ismail9k commented May 22, 2025

Context:

Chrome 135 introduced a powerful set of CSS features enabling native carousels:

  • ::scroll-button() and ::scroll-marker()
  • :has()
  • scroll-snap-type
  • Improved accessibility and keyboard interaction support baked into the browser

These enable lightweight, declarative carousels with little or no JS, great for performance and simplicity.

Proposal:

Add a new native-css prop/mode that renders minimal markup and styles, relying on native CSS behavior for carousel functionality.

Implementation Notes:

  • Prop: nativeCss: boolean
  • When enabled:
    • Skip JS-based slide logic, pagination, etc.
    • Output a scrollable container with scroll-snap-type
    • Use semantic HTML (e.g., <ul><li> for slides)
    • Optionally enhance with scroll indicators if ::scroll-marker() is supported
    • Consider feature detection to fall back to JS mode if browser support is insufficient.

Future Considerations:

  • Add internal utility for feature detection (e.g., CSS.supports)
  • Allow progressive enhancement: JS pagination or navigation overlays can still be used
  • Provide a small example in docs for usage in native mode

References:

@ismail9k ismail9k added the 🌟 feature request New feature or request label May 22, 2025
@ismail9k ismail9k self-assigned this May 22, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🌟 feature request New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant