ProductImageGallery

Domain

Product image viewer: large main image with a thumbnail strip below. Hovering a thumbnail instantly swaps the main image via crossfade. When the image count exceeds thumbsVisible (default 5), the strip grows left/right arrows and becomes a slider.

Preview

1 / 4

Code

<ProductImageGallery
  images={[
    { src: '/front.jpg',   alt: 'Front view' },
    { src: '/side.jpg',    alt: 'Side view' },
    { src: '/on-desk.jpg', alt: 'On desk' },
    { src: '/profile.jpg', alt: 'Profile' },
  ]}
  thumbsVisible={5}
/>

Preview

1 / 8

Code

// 8 images, thumbsVisible=5 → arrows appear automatically
<ProductImageGallery
  images={productImages}
  thumbsVisible={5}
/>

Preview

1 / 4

Code

<ProductImageGallery
  images={productImages}
  aspect="video"
  thumbsVisible={5}
/>

ProductImageGallery

4 görsel — thumbnail strip

8 görsel — slider aktif

Video aspect ratio