Skip to content
{% carousel %}
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

{% carousel %}

Attributes

Parameter Type Required Description
autoplay boolean โ€” Auto-advance slides on a timer โ€” defaults to false
interval number โ€” Autoplay interval in milliseconds โ€” defaults to 5000 (5 seconds)
loop boolean โ€” Allow infinite looping from the last slide back to the first โ€” defaults to true

Valid Children

TagMultiplicity
{% slide %}[*]

Valid Parent Contexts

This tag is valid inside: {% article %}

Rules

Rule Force Realm Reference Description
carousel-children-must-be-slides must global โ€” Direct children of must be tags. Any content placed outside a inside a is ignored by the renderer.
structure
carousel-no-nesting must global โ€” Nested carousels are not supported. A may not appear inside a .
structure

Rendering

Carousel.astro renders a tabbed or paged slideshow. Navigation controls (prev/next buttons, slide indicators) are always visible. When autoplay=true, slides advance every interval milliseconds. loop=true wraps from the last slide back to the first.

Each \{% slide %\} is rendered by CarouselSlide.astro, which receives the label as a tab/indicator label and the child content as its body.