# Product gallery · MIAN

A main image with clickable thumbnails, pure CSS, keyboard-friendly, up to six images.

- Id: `product-gallery` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/product-gallery
- Use for: product images, image gallery, thumbnails, product photos.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-gallery`: The wrapper, with one radio input per image first.
- `mn-gallery-main`: The large images (mn-media), in the same order as the radios.
- `mn-gallery-thumbs`: The thumbnails: one <label for> per radio.
- `mn-gallery-thumb`: A thumbnail label.

## Accessibility

- The radios are a real group: Tab to it, then arrow keys switch images. Name the group (role="group" aria-label) and each radio (aria-label).
- Give the main images alt text; thumbnails repeat them, so their images can be decorative.

## Examples

### Gallery

```html
<div class="mn-gallery" role="group" aria-label="Product images" style="max-width:26rem">
  <input type="radio" name="gal" id="gal-1" aria-label="Image 1: three vases" checked><input type="radio" name="gal" id="gal-2" aria-label="Image 2: glaze detail"><input type="radio" name="gal" id="gal-3" aria-label="Image 3: the studio">
  <div class="mn-gallery-main">
    <div class="mn-media mn-media-portrait"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></div>
    <div class="mn-media mn-media-portrait"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></div>
    <div class="mn-media mn-media-portrait"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></div>
  </div>
  <div class="mn-gallery-thumbs">
    <label class="mn-gallery-thumb" for="gal-1"><span class="mn-media mn-media-square"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></span></label>
    <label class="mn-gallery-thumb" for="gal-2"><span class="mn-media mn-media-square"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></span></label>
    <label class="mn-gallery-thumb" for="gal-3"><span class="mn-media mn-media-square"><!-- illustration (SVG omitted; use your own image or <div class="mn-media mn-media-placeholder">) --></span></label>
  </div>
</div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/product-gallery/source