Gallery 17 - Centered image carousel with scale effect

Pro

Full-width image carousel where the active slide renders at full scale and opacity while neighboring slides shrink and fade, with large arrow buttons and dot pagination.

Vue
Shadcn Gallery 17 block

Component Data

  • ID:gallery17
  • Access:pro
  • Created:Apr 30, 2025
  • Updated:Aug 8, 2026
  • Type:block

Gallery 17 block design & features

The section centers a Shadcn UI Carousel at a maximum width of 50rem with visible overflow so that adjacent slides remain partially visible. Each slide holds a 4:3 image inside a rounded container. The active slide displays at full scale and opacity, while inactive slides scale down to 70% and drop to 40% opacity, all transitioning over 300ms.

Large default-variant CarouselPrevious and CarouselNext buttons are positioned well outside the carousel edges on desktop, sized at 3.5rem. Below the carousel, a row of clickable dot indicators highlights the current slide with a filled circle and renders the rest at low opacity.

The look is gallery-minimal, removing all text and chrome to let the images dominate. The scale-and-fade treatment on off-screen slides creates a natural depth-of-field effect that draws attention to the center.

On smaller screens the navigation arrows hide and the dots become the primary navigation mechanism alongside swipe gestures.