Gallery
Preview:
Configuration:
Output:
Vue component
<Gallery />
Raw HTML
<div class="gallery">
<div class="swiper-navigation-gradients">
<div class="swiper-navigation-gradient-left"></div>
<div class="swiper-navigation-gradient-right"></div>
</div>
<div id="chooseYourOwn" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-1-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-1-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-1-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-1-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-1-xl.jpg" class="swiper-lazy">
</picture>
</div>
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-2-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-2-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-2-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-2-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-2-xl.jpg" class="swiper-lazy">
</picture>
</div>
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-3-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-3-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-3-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-3-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-3-xl.jpg" class="swiper-lazy">
</picture>
</div>
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-4-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-4-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-4-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-4-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-4-xl.jpg" class="swiper-lazy">
</picture>
</div>
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-5-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-5-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-5-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-5-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-5-xl.jpg" class="swiper-lazy">
</picture>
</div>
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-6-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-6-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-6-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-6-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-6-xl.jpg" class="swiper-lazy">
</picture>
</div>
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-7-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-7-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-7-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-7-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-7-xl.jpg" class="swiper-lazy">
</picture>
</div>
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-8-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-8-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-8-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-8-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-8-xl.jpg" class="swiper-lazy">
</picture>
</div>
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-9-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-9-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-9-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-9-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-9-xl.jpg" class="swiper-lazy">
</picture>
</div>
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-10-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-10-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-10-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-10-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-10-xl.jpg" class="swiper-lazy">
</picture>
</div>
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-11-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-11-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-11-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-11-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-11-xl.jpg" class="swiper-lazy">
</picture>
</div>
<div class="swiper-slide">
<picture>
<source media="(min-width: 1463px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-12-xl.jpg">
<source media="(min-width: 1016px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-12-lg.jpg">
<source media="(min-width: 764px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-12-md.jpg">
<source media="(max-width: 763px)" srcset="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-12-sm.jpg">
<img data-src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-12-xl.jpg" class="swiper-lazy">
</picture>
</div>
</div>
<div class="swiper-button-prev">
<svg focusable="false" width="48" height="48">
<use xlink:href="icons/custom-sprite-nuxt.svg#chevron-left"></use>
</svg>
</div>
<div class="swiper-button-next">
<svg focusable="false" width="48" height="48">
<use xlink:href="icons/custom-sprite-nuxt.svg#chevron-right"></use>
</svg>
</div>
</div>
<div thumbsslider="" class="swiper-container thumb-swiper thumb-swiper-chooseYourOwn">
<div class="swiper-wrapper" >
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-1-thumb.jpg"></div>
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-2-thumb.jpg"></div>
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-3-thumb.jpg"></div>
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-4-thumb.jpg"></div>
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-5-thumb.jpg"></div>
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-6-thumb.jpg"></div>
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-7-thumb.jpg"></div>
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-8-thumb.jpg"></div>
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-9-thumb.jpg"></div>
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-10-thumb.jpg"></div>
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-11-thumb.jpg"></div>
<div class="swiper-slide"><img src="/_nuxt/src/global/prototype-assets/images/thumbgallery/thumb-gallery-image-12-thumb.jpg"></div>
</div>
</div>
</div>
Comments
In this component we use "swiperjs thumbnails" - https://swiperjs.com/demos#thumbs-gallery
Get the js from the link above or look in the Gallery component.