_gallery
This is the default gallery molecule.
Add the images through CMS or path's with their alt-text. You can simply add more images/thumbs by adding some img-tags within the specific class.
<div class="m-gallery ">
<div class="m-gallery__slides-container">
<div class="m-gallery__buttons">
<button class="m-gallery__buttons-prev"></button>
<button class="m-gallery__buttons-next"></button>
</div>
<div class="m-gallery__slides">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__slide">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__slide">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__slide">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__slide">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__slide">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__slide">
</div>
</div>
<div class="m-gallery__thumbs-container ">
<div class="m-gallery__thumb-buttons">
<button class="m-gallery__thumb-up"></button>
<button class="m-gallery__thumb-down"></button>
</div>
<div class="m-gallery__thumbs">
<div class="m-gallery__thumb-container">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__thumb">
</div>
<div class="m-gallery__thumb-container">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__thumb">
</div>
<div class="m-gallery__thumb-container">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__thumb">
</div>
<div class="m-gallery__thumb-container">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__thumb">
</div>
<div class="m-gallery__thumb-container">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__thumb">
</div>
<div class="m-gallery__thumb-container">
<img src="<!-- image src -->" alt="<!-- alt text -->" class="m-gallery__thumb">
</div>
</div>
</div>
</div>