# C2 Product Gallery
### Overview
Product gallery with a thumbnail image slider. Thumbnails are selected and update the main feature view. Videos autoplay when selected form thumbnail.

### Props
| Props                     | Type      | Default |
| ------------------------- | --------- | ------- |
| thumbnails                | Array     | 1       |
| autoplayVideos            | Boolean   | true    |
| aspectRatio               | String    | '1/1'   |
| thumbnailWrapperClasses   | String    |         |
| thumbnailListClasses      | String    |         |
| thumbnailItemClasses      | String    |         |
| thumbnailBtnClasses       | String    |         |
| playIconClasses           | String    |         |
| thumbnailImageClasses     | String    |         |
| featuredWrapperClasses    | String    |         |
| featuredImageClasses      | String    |         |
| featuredVideoClasses      | String    |         |

### Slots
| Name              |
| ----------------- |
| play-icon         |

### Code snippet
```
    <c2-product-gallery 
        :thumbnails="gallery"
        :autoplay-videos="false"
        :aspect-ratio="'16/9'"
        :thumbnail-wrapper-classes="'absolute top-0 left-0'"
        :thumbnail-list-classes="'list-none p-0 m-0 flex flex-col'"
        :thumbnail-item-classes="'mb-2 w-16'"
        :thumbnail-btn-classes="'relative flex items-center justify-center w-full'"
        :thumbnail-image-classes="'w-full'"
        :play-icon-classes="'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'"
        :featured-wrapper-classes="'flex pl-20'"
        :featured-image-classes="'w-full object-cover'"
        :featured-video-classes="'w-full'"
        class="w-full max-w-2xl mb-10"
    >
        <template slot:play-icon>
            P
        </template>
    </c2-product-gallery>

    <c2-product-gallery 
        :thumbnails="gallery"
        :autoplay-videos="false"
        :aspect-ratio="'16/9'"
        :thumbnail-wrapper-classes="'absolute bottom-0 left-0'"
        :thumbnail-list-classes="'list-none p-0 m-0 flex flex-row'"
        :thumbnail-item-classes="'mr-2 w-16'"
        :thumbnail-btn-classes="'relative flex items-center justify-center w-full'"
        :thumbnail-image-classes="'w-full'"
        :play-icon-classes="'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'"
        :featured-wrapper-classes="'flex pb-20'"
        :featured-image-classes="'w-full object-cover'"
        :featured-video-classes="'w-full'"
        class="w-full max-w-2xl mb-10"
    >
        <template slot:play-icon>
            P
        </template>
    </c2-product-gallery>

    <c2-product-gallery 
        :thumbnails="gallery"
        :autoplay-videos="false"
        :aspect-ratio="'16/9'"
        :thumbnail-wrapper-classes="'absolute top-0 right-0'"
        :thumbnail-list-classes="'list-none p-0 m-0 flex flex-col'"
        :thumbnail-item-classes="'mb-2 w-16'"
        :thumbnail-btn-classes="'relative flex items-center justify-center w-full'"
        :thumbnail-image-classes="'w-full'"
        :play-icon-classes="'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'"
        :featured-wrapper-classes="'flex pr-20'"
        :featured-image-classes="'w-full object-cover'"
        :featured-video-classes="'w-full'"
        class="w-full max-w-2xl mb-10"
    >
        <template slot:play-icon>
            P
        </template>
    </c2-product-gallery>
```

### Data snippet
```
    [
        {
            alt: 'Product Image',
            featuredSrc: '/images/thumbnail.png',
            thumbnailSrc: '/images/product-image.png',
            type: null,

        },
        {
            alt: 'Video alt text',
            thumbnailSrc: '/images/video-thumbnail.png',
            featuredSrc: '/videos/video.mp4',
            type: 'mp4'
        }
    ]
```