shadcn.io is not affiliated with official shadcn/ui
Centred Carousel Team Block for Vue
Seven people of a ceramics studio in a centred snap carousel: the middle card is full size and raised, its neighbours shrink and mute, and only the middle card is read and focusable.
Installation
Overview
A centred carousel team section for Vue with Ark UI, for Tamsin & Vale, a ceramics studio. A centred header sits over a framed track with + marks at its corners. The card in the middle is full size and raised in your theme's card colour; the cards beside it shrink and take a muted tint, and the frame cuts them off at its edges. Previous and next buttons and a "2 of 7" count sit under the frame, and the arrow keys turn the cards too. Only the middle card is read by a screen reader and reachable by keyboard, and its name and place are announced when it changes. On a phone the track shows one card with a sliver of each neighbour. It's built from Carousel, Avatar, Badge, Button and Guides, with CSS transitions and your theme's tokens for every colour. For team pages that want to introduce one person at a time. Names and lines are made up for the example.
FAQ
How do I change the people?
Edit PEOPLE at the top of the file. A person is a name, a role, one line and two tags; the initials come from the name. The count and the wrap-around read the list's length.
How is the middle card centred and scaled?
One card per page, each slide snapping to its centre, with the track padded by 12% on a phone and 30% from md so the first and last cards can sit in the middle.
The card whose page is current is the middle one. It gets full scale, the raised card style and the full text colour; every other card is scaled to 82%, with a muted solid tint and the muted text colour. The dimming is a tint and a text colour, never opacity, so every word keeps its contrast.
What does a screen reader hear?
Only the middle card. The others are inert and hidden from the reading order, so a keyboard and a screen reader meet one card at a time. A polite status line announces the new person and their place ("Anya Volkova, 2 of 7") when the card changes.
How do the controls work?
Previous and next wrap around, so a button is never disabled while it has focus. With focus on either button the arrow keys turn the cards too, and in a right-to-left page the arrows swap sides. A swipe or a drag snaps to the nearest card.