Gallery 7 - Auto-scrolling image carousel with text intro

Pro

Two-column text header with a link, followed by a looping auto-scroll carousel of staggered-height images.

Vue
Shadcn Gallery 7 block

Component Data

  • ID:gallery7
  • Access:pro
  • Created:Feb 20, 2025
  • Updated:Aug 8, 2026
  • Type:block

Gallery 7 block design & features

The top portion uses a two-column grid where the left column holds a bold heading and the right column holds a body paragraph, with a text link and inline arrow icon spanning below. Beneath the text block, a Shadcn UI Carousel loops continuously using the embla-carousel-auto-scroll plugin at a moderate speed. The carousel track is set to pointer-events-none, making it a purely visual element that users observe rather than interact with.

Images alternate between two vertical offsets based on their index, creating a staggered sawtooth rhythm along the scroll axis. Each image is constrained to a compact max width and height with rounded corners, and they display at auto-basis widths so the carousel packs them tightly without fixed column sizing.

The layout reads as a content-introduction block paired with a passive visual band, where the scrolling images reinforce the heading's theme without requiring user interaction. The staggered heights add subtle vertical variety that prevents the row from feeling flat or repetitive.