Gallery Carousel

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

Customise it with AI

Open Gallery Carousel in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the gallery is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.