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.
