Product Gallery.

A synchronized dual-carousel system designed for high-fidelity commerce experiences. It manages viewport-dependent layouts (thumbnails placement) and seamless state synchronization.

import { ProductGallery } from "@/components/docs/product-gallery"

Configuration

Use Case

Aspect Ratio

New Arrival

Limited Stock

Nike Air Max 97

$179.00

Engineered for absolute comfort and style. This limited edition release features premium materials and our signature attention to detail.

Size

Qty

Square Ratio • Grid Layout

Dual-Instance Synchronization

We run two separate Embla instances: 'Main' and 'Thumbs'. The tricky part is ensuring that swiping the main image updates the active thumbnail state, and clicking a thumbnail scrolls the main image. This is handled via event listeners on the `select` and `reInit` API hooks.

Responsive Orientation Strategy

Instead of Javascript-heavy resize listeners to change the carousel orientation, we use CSS Grid/Flexbox to reorder the DOM. Thumbnails sit on the left for desktop (flex-row) and move to the bottom for mobile (flex-col-reverse parent or order utilities), preserving the touch-drag axis.

ProductPage.tsx

// Inside your page component
const images = [
  { id: 1, url: "/shoe-1.jpg", alt: "Side view" },
  { id: 2, url: "/shoe-2.jpg", alt: "Top view" },
];

return (
  <div className="grid lg:grid-cols-2 gap-12">
    <ProductGallery 
       images={images} 
       aspectRatio="square" 
    />
    <ProductDetails />
  </div>
);