feat: new carousel

[anubra266]

✨ New Carousel Component

This PR introduces a modern, feature-rich carousel built with accessibility and usability in mind.

Key Features

• 🖇️ Scroll Snap-Based Navigation: Ensures precise alignment of slides for a seamless user experience.
• 🚀 Native Scroll for Sliding: Utilizes native scrolling for smoother transitions and optimal performance.
• 🖐️ Drag-to-Scroll Support: Allows users to navigate slides effortlessly by dragging, with the `draggable property.
• 🎯 Focus and Keyboard Navigation: Fully accessible with keyboard controls and proper focus management.
• ⏱️ Autoplay Functionality through autoplay property:
  • Configurable autoplayInterval to set the time between automatic transitions.
  • Includes play and pause methods to enable users to pause or resume autoplay.
• 🔄 Flexible scrollBy Modes:
  • Supports view or item navigation modes for carousels with multiple slidesPerView.
• 📱 Touch device handling

CleanShot.2024-12-02.at.10.21.44.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
zag-nextjs	🔄 Building (Inspect)	Visit Preview	Dec 3, 2024 7:36pm
zag-solid	🔄 Building (Inspect)	Visit Preview	Dec 3, 2024 7:36pm
zag-svelte	🔄 Building (Inspect)	Visit Preview	Dec 3, 2024 7:36pm
zag-vue	🔄 Building (Inspect)	Visit Preview	Dec 3, 2024 7:36pm
zag-website	❌ Failed (Inspect)		Dec 3, 2024 7:36pm

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6717cbf

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[pkg-pr-new]

Open in Stackblitz

@zag-js/anatomy

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/anatomy@2075

@zag-js/anatomy-icons

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/anatomy-icons@2075

@zag-js/docs

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/docs@2075

@zag-js/core

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/core@2075

@zag-js/store

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/store@2075

@zag-js/types

npm i https://pkg.pr.new/chakra-ui/zag/@zag-js/types@2075

commit: d05326c