{"name":"carousel","title":"Carousel","description":"A carousel for cycling through elements, images, or slides of content.","installCommand":"bunx marko-ui add carousel -y","usageTags":"","importSnippet":"import Carousel from \"@/components/ui/carousel/carousel.marko\";","usageSnippet":"static const slides = [\"Slide 1\", \"Slide 2\", \"Slide 3\"];\n\n\n
${item}
\n","tags":["Carousel"],"parts":[{"name":"slide","repeatable":true}],"props":[{"name":"allowMouseDrag","type":"boolean | undefined","required":false,"default":"false","description":"Whether to allow scrolling via dragging with mouse"},{"name":"autoplay","type":"boolean | { delay: number; } | undefined","required":false,"default":"false","description":"Whether to scroll automatically. The default delay is 4000ms."},{"name":"autoSize","type":"boolean | undefined","required":false,"default":"false","description":"Whether to enable variable width slides."},{"name":"defaultPage","type":"number | undefined","required":false,"default":"0","description":"The initial page to scroll to when rendered.\nUse when you don't need to control the page of the carousel."},{"name":"dir","type":"'ltr' | 'rtl' | undefined","required":false,"default":"ltr","description":"The document's text/writing direction."},{"name":"getRootNode","type":"(() => ShadowRoot | Document | Node) | undefined","required":false,"description":"A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron."},{"name":"ids","type":"ElementIds | undefined","required":false,"description":"The ids of the elements in the carousel. Useful for composition."},{"name":"inViewThreshold","type":"number | number[] | undefined","required":false,"default":"0.6","description":"The threshold for determining if an item is in view."},{"name":"items","type":"T[]","required":false},{"name":"loop","type":"boolean | undefined","required":false,"default":"false","description":"Whether the carousel should loop around."},{"name":"orientation","type":"'horizontal' | 'vertical' | undefined","required":false,"default":"horizontal","description":"The orientation of the element."},{"name":"padding","type":"string | undefined","required":false,"description":"Defines the extra space added around the scrollable area,\nenabling nearby items to remain partially in view."},{"name":"page","type":"number | undefined","required":false,"description":"The controlled page of the carousel."},{"name":"slidesPerMove","type":"number | 'auto' | undefined","required":false,"default":"auto","description":"The number of slides to scroll at a time.\n\nWhen set to `auto`, the number of slides to scroll is determined by the\n`slidesPerPage` property."},{"name":"slidesPerPage","type":"number | undefined","required":false,"default":"1","description":"The number of slides to show at a time."},{"name":"snapType","type":"'proximity' | 'mandatory' | undefined","required":false,"default":"mandatory","description":"The snap type of the item."},{"name":"spacing","type":"string | undefined","required":false,"default":"0px","description":"The amount of space between items."},{"name":"translations","type":"IntlTranslations | undefined","required":false,"description":"The localized messages to use."}],"events":[{"name":"onAutoplayStatusChange","arg":"AutoplayStatusDetails","description":"Function called when the autoplay status changes."},{"name":"onDragStatusChange","arg":"DragStatusDetails","description":"Function called when the drag status changes."},{"name":"onPageChange","arg":"PageChangeDetails","description":"Function called when the page changes."},{"name":"pageChange","arg":"number"}],"keyboard":[],"accessibilityNotes":[],"examples":[{"id":"carousel-demo","title":"Basic","source":"import Carousel from \"@marko-ui/shadcn/ui/carousel/carousel.marko\";\n\nstatic const SLIDES = [1, 2, 3, 4, 5];\n\n\n
\n ${item}\n
\n","description":"Pass `items` and render each one through the tag's own body, taking the item as a default-body tag parameter. Use the previous/next triggers to move between pages."},{"id":"carousel-size","title":"Sizes","source":"import Carousel from \"@marko-ui/shadcn/ui/carousel/carousel.marko\";\n\nstatic const SLIDES = [1, 2, 3, 4, 5];\n\n\n
\n ${item}\n
\n","description":"Set `slidesPerPage` to show more than one item at a time."},{"id":"carousel-spacing","title":"Spacing","source":"import Carousel from \"@marko-ui/shadcn/ui/carousel/carousel.marko\";\n\nstatic const SLIDES = [1, 2, 3, 4, 5];\n\n\n
\n ${item}\n
\n","description":"Set `spacing` to control the gap between items."},{"id":"carousel-orientation","title":"Orientation","source":"import Carousel from \"@marko-ui/shadcn/ui/carousel/carousel.marko\";\n\nstatic const SLIDES = [1, 2, 3, 4, 5];\n\n\n
\n ${item}\n
\n","description":"Set `orientation` to `vertical` to stack slides top to bottom."},{"id":"carousel-api","title":"API","source":"import Carousel from \"@marko-ui/shadcn/ui/carousel/carousel.marko\";\n\nstatic const SLIDES = [1, 2, 3, 4, 5];\n\n\n\n
\n \n
\n ${item}\n
\n \n
\n Slide ${page + 1} of ${SLIDES.length}\n
\n
","description":"A `` tag-variable capture gives you the live, reactive machine api — read `carouselApi().page` and `carouselApi().pageSnapPoints` directly, no `setApi`/`useEffect` subscription needed."},{"id":"carousel-plugin","title":"Autoplay","source":"import Carousel from \"@marko-ui/shadcn/ui/carousel/carousel.marko\";\n\nstatic const SLIDES = [1, 2, 3, 4, 5];\n\n\n\n\n \n
\n
\n ${item}\n
\n
\n \n","description":"Our carousel is backed by `@zag-js/carousel`, which has autoplay built in — pass `autoplay={ delay }` instead of an Embla plugin, and call `api().pause()` / `api().play()` to stop on hover."},{"id":"carousel-rtl","title":"RTL","source":"import Carousel from \"@marko-ui/shadcn/ui/carousel/carousel.marko\";\n\nstatic const ARABIC_NUMERALS = [\"٠\", \"١\", \"٢\", \"٣\", \"٤\", \"٥\", \"٦\", \"٧\", \"٨\", \"٩\"];\nstatic function toArabicNumerals(num: number): string {\n return String(num)\n .split(\"\")\n .map((digit) => ARABIC_NUMERALS[Number(digit)])\n .join(\"\");\n}\n\nstatic const SLIDES = [1, 2, 3, 4, 5];\n\n\n
\n
\n\n ${toArabicNumerals(item as number)}\n
\n
\n","description":"`dir=\"rtl\"` is a real machine prop: it flips scroll direction, keyboard arrows, and item order. The previous/next icons already carry `mu-rtl-flip` in the component, so no extra classes are needed."},{"id":"carousel-loop","title":"Loop","source":"import Carousel from \"@marko-ui/shadcn/ui/carousel/carousel.marko\";\n\nstatic const SLIDES = [1, 2, 3, 4, 5];\n\n\n
\n ${item}\n
\n","description":"Set `loop` so the carousel wraps around at the first and last slide."},{"id":"carousel-controlled","title":"Controlled","source":"import Carousel from \"@marko-ui/shadcn/ui/carousel/carousel.marko\";\n\nstatic const SLIDES = [1, 2, 3, 4, 5];\n\n\n\n
\n

Page: ${page}

\n \n
\n ${item}\n
\n \n
","description":"The carousel is controlled: a `page` prop without `pageChange` never moves. Pair the two to drive the current page from your own state.","essential":true},{"id":"carousel-compound","title":"Compound (attr tags)","source":"import Carousel from \"@marko-ui/shadcn/ui/carousel/carousel.marko\";\n\n\n <@slide>\n
\n 1\n
\n \n <@slide>\n
\n 2\n
\n \n <@slide>\n
\n 3\n
\n \n","description":"Use `<@slide>` attribute tags instead of `items=` to compose each slide's markup directly.","essential":true}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","body":{"param":"T | undefined, number","description":"Render prop for `items=` entries.\n\nThe item is `T | undefined`, not `T`: a bodyless `<@slide/>` produces an\nentry with no datum, and the render path below deliberately still invokes\nthis body for it (see the comment at the call site — the render prop owns\nplaceholder slides). Declaring it as `T` promised a value this component\ndoes not always pass."},"nativeAttributes":"div","composition":"`Carousel` is a single component, not four. Where upstream composes `Carousel` / `CarouselContent` / `CarouselItem` / `CarouselPrevious` / `CarouselNext`, this port folds the item group, previous/next triggers, and a page-indicator group into `Carousel` itself: pass `items=` and render each one through the tag's own body, taking the item as a default-body tag parameter (or use `@slide` attr tags for static markup), and the component renders the scroll container, buttons, and indicators for you. There is no separate `CarouselContent`, `CarouselItem`, `CarouselPrevious`, or `CarouselNext` tag to import."}