Gallery 22 - Coverflow team carousel with info card

Pro

Coverflow portrait carousel with gradient edge masks, a bordered info card showing the active person's name and role, social icon links on each slide, and chevron navigation buttons.

Vue
Shadcn Gallery 22 block

Component Data

  • ID:gallery22
  • Access:pro
  • Created:May 4, 2025
  • Type:block

Gallery 22 block design & features

The block renders a Swiper carousel with the coverflow effect inside a narrow max-width container. Each slide holds a portrait image with a shadow and a small square social-media icon link pinned to the top-left corner using a solid foreground background. Inactive slides drop to 20% opacity while the active slide stays fully visible. Gradient masks on the left and right edges fade the container to the background color. An absolutely positioned bordered card overlaps the carousel, displaying the active person's name and role, with chevron prev/next buttons anchored at the bottom-right.

The slides use sharp rectangular corners and a slight top margin to offset from the info card border. The social icon squares sit slightly outside the slide edge with a hover scale and rotation effect. Custom CSS removes default Swiper 3D shadows and fixes the slide dimensions at 200 by 300 pixels. The carousel loops and auto-advances every 1.5 seconds.

The aesthetic is editorial and team-focused, pairing the depth perspective of coverflow with a structured info card overlay. The combination of the sharp-cornered slides and the bordered card creates a graphic, almost print-layout quality.