Components

Carousel

Carousel reference for TicFrame components, covering usage, accessibility, responsive behavior, dark mode, RTL, source examples, and production guidance.

Requirements

Carousel is implemented with semantic HTML, TicFrame classes, design tokens, responsive utilities, and documented data attributes. It does not require website-specific CSS.

Use the tf-* namespace consistently so the class validator can prove every visual dependency ships from TicFrame.

Usage Guidance

Start with the semantic element, add the matching TicFrame component or utility classes, and use data attributes only for behavior that TicFrame documents. Keep labels, headings, and landmarks visible to assistive technology.

Responsive

Mobile-first utilities such as md:tf-grid-cols-3 scale the layout.

Dark mode

Colors resolve through data-tf-theme and semantic tokens.

RTL

Logical spacing and direction-aware JS keep the component mirrored safely.

Live Example

Slide one

Slide two

HTML

<div id="sample-carousel" class="tf-carousel" data-tf-carousel aria-label="Feature carousel"><article class="tf-card"><div class="tf-card-body">Slide one</div></article><article class="tf-card"><div class="tf-card-body">Slide two</div></article></div>
<div class="tf-flex tf-gap-2 tf-mt-3"><button type="button" class="tf-btn tf-btn-sm" data-tf-carousel-target="#sample-carousel" data-tf-carousel-action="previous">Previous</button><button type="button" class="tf-btn tf-btn-sm" data-tf-carousel-target="#sample-carousel" data-tf-carousel-action="next">Next</button></div>

Reference

Area	Contract
Classes	`tf-container`, `tf-card`, `tf-btn`, and feature-specific `tf-*` classes.
Accessibility	Keyboard access, visible focus, associated labels, ARIA only where native HTML needs support.
JavaScript	Automatic initialization through `TicFrame.init()` and the documented data API.
Tokens	`--tf-color-`, `--tf-space-`, `--tf-radius-`, and `--tf-shadow-`.