Перестает работать thumb у swiper?

Question

NasekinLovell @NasekinLovell

Перестает работать thumb у swiper?

Есть два слайдера. Один слайдер имеет особенность: отображены все слайды разом во всю высоту и при обычном скролле страницы слайды не уходят под полотно страницы, как было бы со свойством overflow hidden. А просто отображаются единой группой.

Второй сладйер - это thumb. Проблема заключается в том, что если сделать высоту

.swiper {
width: 100%;
height: 100vh;
}

то thumb работает, но тогда теряется особенность слайдера. Они перестают отображаться во всю высоту, а так нельзя. Как сделать так, чтобы как на пример https://brandshop.ru/goods/452209/np0a4hvg176/
Вот верстка

<div thumbsSlider="" class="swiper productCardThumb">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="block-product__thumb">
                        <img alt="" src="../../assets/img/unicorn.jpg">
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__thumb">
                        <img alt="" src="../../assets/img/unicorn.jpg">
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__thumb">
                        <img alt="" src="../../assets/img/unicorn.jpg">
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__thumb">
                        <img alt="" src="../../assets/img/unicorn.jpg">
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__thumb">
                        <img alt="" src="../../assets/img/unicorn.jpg">
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__thumb">
                        <img alt="" src="../../assets/img/unicorn.jpg">
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__thumb">
                        <img alt="" src="../../assets/img/unicorn.jpg">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="swiper productCard">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                          <img alt="" src="../../assets/img/unicorn.jpg">
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                          <img alt="" src="../../assets/img/unicorn.jpg">
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                          <img alt="" src="../../assets/img/unicorn.jpg">
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                          <img alt="" src="../../assets/img/unicorn.jpg">
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                          <img alt="" src="../../assets/img/unicorn.jpg">
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                          <img alt="" src="../../assets/img/unicorn.jpg">
                        </div>
                      </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="block-product__slide">
                        <div class="swiper-zoom-container">
                          <img alt="" src="../../assets/img/unicorn.jpg">
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="swiper-pagination"></div>
                </div>

Вот стили

.block-product {
  padding: 50px;

  &__content {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  &__img {
    width: 75%;
    display: flex;
    justify-content: space-between;
  }

  &__info {
    width: 20%;
    background-color: blue;
    height: 400px;
    position: sticky;
    top: 100px;
  }

  &__thumbs {}

  &__slider {}

  &__slide {
    cursor: zoom-in;
    overflow: hidden;

    img {
      height: 700px !important;
    }
  }
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 1;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

// .productCard .swiper-slide {
//   width: auto;
//   height: auto !important;
// }

.productCardThumb {
  position: sticky;
  top: 100px;
  width: 75px;
  height: max-content;
}

.productCardThumb .swiper-slide-thumb-active {
  filter: brightness(0.9) !important;
  transition: 0.2s;

  img {
    border-radius: 10px;
  }
}

.productCardThumb .swiper-slide {
  filter: brightness(1);
  width: 65px;
  height: auto !important;
}

.productCardThumb .swiper-slide:last-child {
  margin-bottom: 0 !important;
}

Вот js

require('../../assets/scss/main.scss');
require('./page.scss');
import Swiper, { Autoplay, FreeMode, Mousewheel, Zoom, Thumbs } from 'swiper';

Swiper.use([Autoplay, FreeMode, Mousewheel, Zoom, Thumbs]);

document.addEventListener('DOMContentLoaded', () => {
    const productCardThumb = new Swiper('.productCardThumb', {
        slidesPerView: 'auto',
        direction: 'vertical',
        spaceBetween: 10,
        freeMode: {
            enabled: true
        },
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
    });

    const productCard = new Swiper('.productCard', {
        zoom: true,
        slidesPerView: 'auto',
        direction: 'vertical',
        spaceBetween: 30,
        thumbs: {
            swiper: productCardThumb,
        },
        freeMode: true,
        mousewheel: {
            forceToAxis: true
        },
    });
});

вот пример как должно быть https://brandshop.ru/goods/452209/np0a4hvg176/