Swiper slider не переключается слайд в thumbs

Question

Cлева в thumbs, слайды по стрелочкам переключаются только до третьего, но если нажать на сам слайд или на стрелочку которая находиться на главном экране, то все работает. Помогите сделать чтобы в thumbs по стрелочкам можно было переключить до последнего слайда!

const sliderThumbs = new Swiper('.product-slider__thumbs .swiper-container', { // ищем слайдер превью по селектору
    // задаем параметры
    direction: 'vertical', // вертикальная прокрутка
    slidesPerView: 3, // показывать по 3 превью
    spaceBetween: 10, // расстояние между слайдами
  navigation: {
    nextEl: '.product-slider__btn-thumb--next',
    prevEl: '.product-slider__btn-thumb--prev',
  },
});

const sliderImages = new Swiper('.product-slider__images .swiper-container', { // ищем слайдер превью по селектору
    direction: 'horizontal', 
    slidesPerView: 1, 
    thumbs: { // указываем на превью слайдер
        swiper: sliderThumbs, // указываем имя превью слайдера
    slideToClickedSlide: true
    },
  navigation: {
    nextEl: '.product-slider__btn-main--next',
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  },
});

sliderThumbs.on('slideChange', function () {
  var activeIndex = sliderThumbs.activeIndex;
  sliderImages.slideTo(activeIndex);
});

sliderImages.on('slideChange', function () {
  var activeIndex = sliderImages.activeIndex;
  sliderThumbs.slideTo(activeIndex);
});

.product-slider {
  color: #fff;
  display: flex;
  justify-content: center;

  & .swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  &__thumbs {
    height: 570px;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 150px;
    margin-right: 10px;
  }

  &__images {
    height: 570px;
    width: 457px;
    position: relative;
  }

  &__image {
    background-color: #E4E4E5;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 22px;
  
    img {
      width: 100%;
      height: 100%;
    }
  }

  &__pagination span.swiper-pagination-bullet  {
    width: 76px;
    height: 4px;
    background: #FFFFFF;
    border-radius: 100px;
  }
}

.swiper-slide-thumb-active .view-360__bc::after {
  display: none;
}
.swiper-slide-thumb-active .view-360__bc::before {
  display: none;
}

.product-slider__btn-main--next {
  position: absolute;
  top: 47%;
  right: 0;
  background-image: url(/images/product/arrow-next.svg);
  height: 40px;
  width: 40px;
  z-index: 6;
}

.product-slider__btn-thumb--next {
  position: absolute;
  bottom: 0;
  right: 36%;
  background-image: url(/images/product/arrow-next.svg);
  height: 40px;
  width: 40px;
  transform: rotate(90deg);
  z-index: 6;
}

.product-slider__btn-thumb--prev {
  position: absolute;
  top: 0;
  right: 36%;
  background-image: url(/images/product/arrow-next.svg);
  height: 40px;
  width: 40px;
  transform: rotate(270deg);
  z-index: 6;
}

button.product-slider__btn-thumb--prev.swiper-button-disabled {
  opacity: 0;
}

<div class="product-slider">
          <div class="product-slider__thumbs">
            <div class="swiper-container"> <!-- Слайдер с превью -->
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div class="product-slider__image view-360__bc"><img src="/images/product/product.png" alt=""/></div>
                </div>
                <div class="swiper-slide">
                  <div class="product-slider__image"><img src="/images/product/product.png" alt=""/></div>
                </div>
                <div class="swiper-slide">
                  <div class="product-slider__image"><img src="/images/product/product.png" alt=""/></div>
                </div>
                <div class="swiper-slide">
                  <div class="product-slider__image"><img src="/images/product/product.png" alt=""/></div>
                </div>
                <div class="swiper-slide">
                  <div class="product-slider__image"><img src="/images/product/product.png" alt=""/></div>
                </div>
              </div>
              <button class="product-slider__btn-thumb--next"></button>
              <button class="product-slider__btn-thumb--prev"></button>
            </div>
          </div>
          <div class="product-slider__images">
              <div class="swiper-container"> <!-- Слайдер с изображениями -->
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="product-slider__image">
                            <div class="product-slider__3dmodel">
                                <div class="view-360"></div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                      <div class="product-slider__image"><img src="/images/product/product-big.png" alt=""/></div>
                    </div>
                    <div class="swiper-slide">
                      <div class="product-slider__image"><img src="/images/product/product-big.png" alt=""/></div>
                    </div>
                    <div class="swiper-slide">
                      <div class="product-slider__image"><img src="/images/product/product-big.png" alt=""/></div>
                    </div>
                    <div class="swiper-slide">
                      <div class="product-slider__image"><img src="/images/product/product-big.png" alt=""/></div>
                    </div>
                  </div>
                  <button class="swiper-pagination product-slider__pagination"></button>
                  <button class="product-slider__btn-main--next"></button>
              </div>
          </div>
        </div>

К дополнению еще картинка

БЛОГ НА HUSL

Swiper slider не переключается слайд в thumbs

Ответы (0 шт):