Gallery

Galeria com thumbnail na vertical

Preview

HTML

<div class="gallery__slider">
  <div class="gallery__slider--thumbnails swiper">
    <div class="swiper-wrapper">
      {% for media in activeVariation.media %}
        <figure class="swiper-slide">
          <img
            src="{{ media.url }}"
            alt="{{ media.label }}"
            onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
          >
        </figure>
      {% endfor %}
      <button class="gallery__slider--button" id="nextButton">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.3333 10.7813L7.3333 2.66665L8.66664 2.66665L8.66664 10.7813L12.2426 7.20531L13.1853 8.14798L7.99997 13.3333L2.81464 8.14798L3.7573 7.20531L7.3333 10.7813Z" fill="#A7A7A7"/>
        </svg>
      </button>
    </div>
  </div>

  <div class="gallery__slider--gallery swiper">
    <div class="swiper-wrapper">
      {% for media in activeVariation.media %}
        <figure class="swiper-slide">
          <img
            src="{{ media.url }}"
            alt="{{ media.label }}"
            onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
          >
        </figure>
      {% endfor %}
    </div>
  </div>
</div>

{% if activeVariation.media %}
  <script>
    function initThumbSlider() {
      let thumb = new Swiper(".gallery__slider--thumbnails", {
        centeredSlidesBounds: true,
        slidesPerView: 'auto',
        watchOverflow: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        direction: 'vertical',
      });

      let gallery = new Swiper(".gallery__slider--gallery", {
        watchOverflow: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        loop: true,
        thumbs: {
          swiper: thumb
        },
        loopFillGroupWithBlank: true,
      });

      thumb.on('slideChange', function () {
        if (thumb.activeIndex) {
          gallery.slideTo(thumb.activeIndex);
        }
      });

      gallery.on('slideChange', function () {
        if (gallery.activeIndex) {
          thumb.slideTo(gallery.activeIndex);
        }
      });

      document.getElementById('nextButton').addEventListener('click', function() {
        gallery.slideNext();
      });
    }

    _dom('Swiper').waitVariable(function () {
      initThumbSlider();
    });
  </script>
{% endif %}

CSS

.gallery__slider {
  width: 100%;
  height: auto;
  justify-content: space-between;
  position: sticky;
  display: flex;
  gap: 16px;
  margin: 0 auto;
  max-width: 768px;
}

.swiper{
  height: auto;
}

.gallery__slider--thumbnails {
  max-width: 72px;
  margin-left: 0;
}

.gallery__slider--thumbnails .swiper-wrapper{
  gap: 12px;
  position: relative;
}

.gallery__slider--thumbnails .gallery__slider--button{
  width: 32px;
  height: 32px;
  border: 1px solid #E6E6E6;
  border-radius: 800px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}

.gallery__slider--thumbnails .gallery__slider--button svg{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.gallery__slider--thumbnails .swiper-slide {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px !important;
  border-radius: 4px;
  border: 1px solid #E6E6E6;
}

.gallery__slider--thumbnails .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.gallery__slider--thumbnails .swiper-slide-thumb-active {
  cursor: auto;
  border: 1.5px solid #000000;
}

.gallery__slider--gallery {
  height: 100%;
  margin: 0 !important;
}

.gallery__slider--gallery.swiper {
  width: 100%;
  max-width: 680px;
}

.gallery__slider--gallery .swiper-slide {
  background-size: cover;
  background-position: center;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  border-radius: 4px;
  border: 1px solid #E6E6E6;
}

.gallery__slider--gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/**
  * ----------------------------------------
  *         mobile  breaKpoints
  * ----------------------------------------
 */
@media (max-width: 768px){
  .gallery__slider--thumbnails {
    max-width: 48px;
  }

  .gallery__slider--thumbnails .swiper-slide {
    height: 48px !important;
  }

  .gallery__slider {
      max-width: 312px;
    }
}

Galeria com thumbnail na horizontal

Preview

HTML

<div class="gallery__slider">
  <div class="gallery__slider--thumbnails swiper">
    <div class="swiper-wrapper">
      {% for media in activeVariation.media %}
        <figure class="swiper-slide">
          <img
            src="{{ media.url }}"
            alt="{{ media.label }}"
            onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
          >
        </figure>
      {% endfor %}
      <button class="gallery__slider--button" id="nextButton">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.3333 10.7813L7.3333 2.66665L8.66664 2.66665L8.66664 10.7813L12.2426 7.20531L13.1853 8.14798L7.99997 13.3333L2.81464 8.14798L3.7573 7.20531L7.3333 10.7813Z" fill="#A7A7A7"/>
        </svg>
      </button>
    </div>
  </div>

  <div class="gallery__slider--gallery swiper">
    <div class="swiper-wrapper">
      {% for media in activeVariation.media %}
        <figure class="swiper-slide">
          <img
            src="{{ media.url }}"
            alt="{{ media.label }}"
            onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
          >
        </figure>
      {% endfor %}
    </div>
  </div>
</div>

{% if activeVariation.media %}
  <script>
    function initThumbSlider() {
      let thumb = new Swiper(".gallery__slider--thumbnails", {
        centeredSlidesBounds: true,
        slidesPerView: 'auto',
        watchOverflow: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        direction: 'horizontal',
      });

      let gallery = new Swiper(".gallery__slider--gallery", {
        watchOverflow: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        loop: true,
        thumbs: {
          swiper: thumb
        },
        loopFillGroupWithBlank: true,
      });

      thumb.on('slideChange', function () {
        if (thumb.activeIndex) {
          gallery.slideTo(thumb.activeIndex);
        }
      });

      gallery.on('slideChange', function () {
        if (gallery.activeIndex) {
          thumb.slideTo(gallery.activeIndex);
        }
      });

      document.getElementById('nextButton').addEventListener('click', function() {
        gallery.slideNext();
      });
    }

    _dom('Swiper').waitVariable(function () {
      initThumbSlider();
    });
  </script>
{% endif %}

CSS

.gallery__slider {
  width: 100%;
  height: auto;
  justify-content: space-between;
  position: sticky;
  display: flex;
  flex-direction: column-reverse;
  gap: 16px;
  margin: 0 auto;
  max-width: 768px;
}

.gallery__slider--thumbnails {
  max-height: 72px;
  margin-left: 0;
}

.gallery__slider--thumbnails .swiper-wrapper{
  gap: 12px;
  position: relative;
}

.gallery__slider--thumbnails .gallery__slider--button{
  width: 32px;
  height: 32px;
  border: 1px solid #E6E6E6;
  border-radius: 800px;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  cursor: pointer;
}

.gallery__slider--thumbnails .gallery__slider--button svg{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.gallery__slider--thumbnails .swiper-slide {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 72px;
  height: 72px !important;
  border-radius: 4px;
  border: 1px solid #E6E6E6;
}

.gallery__slider--thumbnails .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.gallery__slider--thumbnails .swiper-slide-thumb-active {
  cursor: auto;
  border: 1.5px solid #000000;
}

.gallery__slider--gallery {
  height: 100%;
  margin: 0 !important;
}

.gallery__slider--gallery.swiper {
  width: 100%;
}

.gallery__slider--gallery .swiper-slide {
  background-size: cover;
  background-position: center;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  border-radius: 4px;
  border: 1px solid #E6E6E6;
}

.gallery__slider--gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/**
  * ----------------------------------------
  *         mobile  breaKpoints
  * ----------------------------------------
 */

@media (max-width: 768px){
  .gallery__slider--thumbnails {
    max-height: 48px;
  }

  .gallery__slider--thumbnails .swiper-slide {
    width: 48px !important;
  }

  .gallery__slider {
    max-width: 312px;
  }
}

Galeria com thumbnail na vertical, botões de next e previous e paginação

Neste modelo de galeria a thumbnail fica oculta na versão mobile, mantendo apenas o carrossel de imagens com os botões e a paginação.

Preview

HTML

<div class="gallery__slider">
  <div class="gallery__slider--thumbnails swiper">
    <div class="swiper-wrapper">
      {% for media in activeVariation.media %}
        <figure class="swiper-slide">
          <img
            src="{{ media.url }}"
            alt="{{ media.label }}"
            onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
          >
        </figure>
      {% endfor %}
    </div>
  </div>

  <div class="gallery__slider--gallery swiper">
    <button class="gallery__slider--button swiper-button-prev">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M5.21863 7.33336L13.3333 7.33336V8.6667H5.21863L8.79463 12.2427L7.85196 13.1854L2.66663 8.00003L7.85196 2.8147L8.79463 3.75736L5.21863 7.33336Z" fill="black"/>
      </svg>
    </button>
    <div class="swiper-wrapper">
      {% for media in activeVariation.media %}
        <figure class="swiper-slide">
          <img
            src="{{ media.url }}"
            alt="{{ media.label }}"
            onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
          >
        </figure>
      {% endfor %}
    </div>
    <div class="swiper-pagination"></div>
    <button class="gallery__slider--button swiper-button-next" >
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M10.7814 8.66664L2.66671 8.66664L2.66671 7.3333L10.7814 7.3333L7.20537 3.7573L8.14804 2.81464L13.3334 7.99997L8.14804 13.1853L7.20537 12.2426L10.7814 8.66664Z" fill="black"/>
      </svg>
    </button>
  </div>
</div>

{% if activeVariation.media %}
  <script>
    function initThumbSlider() {
      let thumb = new Swiper(".gallery__slider--thumbnails", {
        centeredSlidesBounds: true,
        slidesPerView: 'auto',
        watchOverflow: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        direction: 'vertical',
      });

      let gallery = new Swiper(".gallery__slider--gallery", {
        watchOverflow: true,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
        loop: true,
        thumbs: {
          swiper: thumb
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          prevEl: `.swiper-button-prev`,
          nextEl: `.swiper-button-next`
        },
        loopFillGroupWithBlank: true,
      });

      thumb.on('slideChange', function () {
        if (thumb.activeIndex) {
          gallery.slideTo(thumb.activeIndex);
        }
      });

      gallery.on('slideChange', function () {
        if (gallery.activeIndex) {
          thumb.slideTo(gallery.activeIndex);
        }
      });
    }

    _dom('Swiper').waitVariable(function () {
      initThumbSlider();
    });
  </script>
{% endif %}

CSS

.gallery__slider {
  width: 100%;
  height: auto;
  justify-content: space-between;
  position: sticky;
  display: flex;
  gap: 16px;
  margin: 0 auto;
  max-width: 768px;
}

.gallery__slider--thumbnails {
  max-width: 72px;
  margin-left: 0;
}

.gallery__slider--thumbnails .swiper-wrapper {
  gap: 12px;
  position: relative;
}

.gallery__slider--thumbnails .swiper-slide {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px !important;
  border-radius: 4px;
  border: 1px solid #E6E6E6;
}

.gallery__slider--thumbnails .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.gallery__slider--thumbnails .swiper-slide-thumb-active {
  cursor: auto;
  border: 1.5px solid #000000;
}

.gallery__slider--gallery {
  height: 100%;
  margin: 0 !important;
  position: relative;
}

.gallery__slider--gallery.swiper {
  width: 100%;
  max-width: 680px;
}

.gallery__slider--gallery .gallery__slider--button {
  width: 32px;
  height: 32px;
  border: 1px solid #E6E6E6;
  border-radius: 800px;
  background-color: #fff;
  position: absolute;
  cursor: pointer;
  box-shadow: 0px 1px 8px 0px #0000001F;
  z-index: 2;
}

.gallery__slider--gallery .gallery__slider--button svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.gallery__slider .swiper-button-next:after {
  content: ''!important;
}

.gallery__slider .swiper-button-prev:after{
  content: ''!important;
}

.gallery__slider--gallery .swiper-slide {
  background-size: cover;
  background-position: center;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  border-radius: 4px;
  border: 1px solid #E6E6E6;
}

.gallery__slider--gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.gallery__slider .swiper-pagination {
  bottom: 16px !important;
}

.gallery__slider .swiper-pagination-bullet {
  width: 12px;
  height: 6px;
  border-radius: 24px;
  background-color: #E6E6E6;
  opacity: 1;
}

.gallery__slider .swiper-pagination-bullet-active {
  background-color: #2C2C2C;
}

/**
  * ----------------------------------------
  *         mobile  breaKpoints
  * ----------------------------------------
 */
@media (max-width: 768px) {
  .gallery__slider--thumbnails {
    display: none;
  }
  
  .gallery__slider {
    max-width: 312px;
  }
}

Galeria com grid de imagens

Preview

HTML

<!--
  O código html deve ser inserido em:
  'Elementos > product page > images'
--> 

<div class="gallery">
  <div class="gallery__images">
    {% for media in activeVariation.media %}
        <img
          src="{{ media.url }}"
          alt="{{ media.label }}"
          onerror="this.src = 'https://storage.test.increazy.com/base_pwa/images/no-image.webp'"
        >
    {% endfor %}
  </div>
</div> 

CSS

/* Defina max-width em .gallery de acordo com sua necessidade */
.gallery{
  max-width: 1024px;
  max-height: auto;
  width: 100%;
  height: auto;
}

.gallery__images{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  row-gap: 16px;
  column-gap: 16px;
}

.gallery__images img{
  height: auto;
  width: calc(50% - 8px);
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #E6E6E6;
}

@media (max-width: 768px){
  .gallery__images {
    flex-direction: column;
  }
}