Carousel Component Demo

This document demonstrates the new WorkCarousel component that matches the exact look and functionality of the Figma Sites carousel.

Figma Sites-style Carousel

The carousel shows 2 full images and a partial third image, with navigation arrows and a slide counter, exactly like the one on the Figma Sites webpage.

Features

The carousel component includes:

• 2.2 image layout: Shows 2 full images and a partial third image
• Navigation controls: Arrow buttons on the top right
• Slide counter: Shows current position (e.g., "1 / 4") on the top left
• Smooth animations: 300ms transition between slides
• Responsive design: Adapts to different screen sizes
• Dark mode support: Automatically adjusts for light/dark themes
• Optional captions: Each image can have a caption overlay
• Disabled states: Navigation arrows are disabled at start/end

Usage

To use the carousel in your work posts, use the following syntax:

The pattern is: src|alt|caption for each image, separated by pipes. Captions are optional - you can leave them empty but still need the pipe separator.

Multiple Carousels

You can have multiple carousels in the same post:

Each carousel operates independently with its own navigation and state.