# Gallery Carousel

> A luxury real-estate gallery carousel with expanding flex-grow transitions, prev/next navigation, crossfading captions and property details.

- Category: Gallery
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sienna
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: carousel, animation
- Page: https://builder.atheros.ai/components/gallery-carousel
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_gallery_carousel/preview-dd24c65c379d.webp

## Features

- Smooth flex-grow gallery expansion — active item grows while siblings compress with a spring-like cubic-bezier transition
- Gradient overlay on active image with flag, property name, location and price
- Per-item accent colors via `--item-accent` CSS variable — drives accent strip, dot color, and active glow
- Vertical text labels on compressed thumbnails (`writing-mode: vertical-rl`) that fade out when active
- Editorial thin-dash position indicators — active dash adopts the item's accent color
- On-card specs with Tabler Icons (beds, baths, area), description, price and view-listing link
- Inactive item dimming via `filter: brightness()` for visual focus on the active property
- Country flag emojis shown alongside location on the active image overlay
- Dark and light themes with localStorage persistence and system preference detection
- Keyboard navigation via ArrowLeft/ArrowRight keys and clickable dots
- Respects `prefers-reduced-motion: reduce` — all animations and transitions are disabled
- Data-driven rendering — gallery items and Tabler icon paths are defined in JS data modules
- Accessible WAI-ARIA carousel pattern with live region announcements

## Accessibility

- **Carousel region** — `role="region"` `aria-roledescription="carousel"` with `aria-label`
- **Slide groups** — `role="group"` `aria-roledescription="slide"` with descriptive `aria-label`
- **Live region** — `aria-live="polite"` announces the current item on navigation
- **Theme toggle** — `role="switch"` with `aria-checked` toggled by JS
- **Focus indicators** — `:focus-visible` with `--ring` outline on all interactive elements
- **Keyboard nav** — `ArrowLeft`/`ArrowRight` move between gallery items
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Viewport** — `100dvh` for mobile-safe viewport height
- **Inactive items** — `aria-hidden="true"` on non-active gallery items

## Keyboard shortcuts

- `ArrowLeft` — Previous gallery item
- `ArrowRight` — Next gallery item

## Common questions

**Which frameworks is Gallery Carousel available in?**

Gallery Carousel ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Gallery Carousel free?**

Gallery Carousel is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Gallery Carousel support dark mode?**

Yes. Gallery Carousel ships light and dark themes, both drawn from the Sienna design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Gallery Carousel live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/gallery-carousel

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt