Как реализовать вертикальную прокрутку Swiper-a при клике на превьюшки?

Question

[weptl1]

У меня есть компонент Swiper Gallery Thumbs, я сделал оба слайдера вертикальными один с превью другой с большими фото, и большие фото и маленькие все видны как проскроллить до большого слайда при клике на маленький?

Видео

Код

<template lang="pug">
.product-slider
  .product-slider__images
    Swiper.product-slider__swiper(
      :style=`{
        '--swiper-navigation-color': '#20262d',
        '--swiper-pagination-color': '#20262d',
      }`
      allowSlideNext
      :watchSlidesProgress="true"
      :auto-update="true"
      :spaceBetween="10"
      :thumbs="{ swiper: thumbsSwiper }"
      :modules="modules"
      :lazy="true"
      @swiper="setThumbsSwiper"
      :breakpoints=`{
        0: {
            direction: 'horizontal',
            pagination: {
                clickable: true
            }
        },
        1000: {
            direction: 'vertical',
            freeMode: true,
            slidesPerView: 'auto'
        }
      }`
    )
      SwiperSlide.product-slider__swiper-slide(
        v-if="images"
        v-for="item of images"
        :key="item"
      )
        img.product-slider__image(
          v-if="item"
          :src="item"
          draggable="false"
          loading="lazy"
        )
  .product-slider__images._mini
    Swiper.product-slider__swiper._mini(
      slidesPerView="auto"
      allowSlideNext
      :watchSlidesProgress="true"
      :modules="modulesMini"
      @swiper="setThumbsSwiper"
      :breakpoints=`{
        0: { // при 0px и выше
            direction: 'horizontal', // горизонтальная прокрутка
        },
        1000: { // при 768px и выше
            direction: 'vertical', // вертикальная прокрутка
        }
      }`
    )
      SwiperSlide.product-slider__swiper-slide-mini(
        v-if="images"
        v-for="item of images"
        :key="item"
      )
        img.product-slider__image._mini(
          v-if="item"
          :src="item"
          draggable="false"
          loading="lazy"
        )
</template>

<script setup lang="ts">
import {ref} from "vue";
import {FreeMode, Navigation, Pagination, Thumbs} from "swiper/modules";

type Props = {
  images: string[]
}
const props = defineProps<Props>()

const modules = [Pagination, Navigation, Thumbs, FreeMode];
const modulesMini = [Navigation, Thumbs, FreeMode];

const thumbsSwiper = ref(null);

const setThumbsSwiper = (swiper: any) => {
  thumbsSwiper.value = swiper;
};
</script>

<style scoped lang="scss">
.product-slider {
  display: grid;

  @media (min-width: $bp-lg-min) {
    grid-template-areas: 'swiper-mini swiper';
    grid-template-columns: 70px 1fr;
  }

  &__images {
    background-color: $color-light;
    width: 100%;
    min-width: 1px;
    overflow: auto;
    display: flex;
    justify-content: center;
    
    @media (min-width: $bp-lg-min) {
      grid-area: swiper;
      height: fit-content;
      background: transparent;
    }

    &._mini {
      @media (min-width: $bp-lg-min) {
        grid-area: swiper-mini;
        position: sticky;
        top: 20px;
      }
    }
  }

  &__swiper {
    width: 100%;

    &._mini {
      .swiper-slide {
        opacity: 0.4;

        &.swiper-slide-thumb-active {
          opacity: 1;
        }
      }
    }
  }

  &__swiper-slide-mini {
    width: auto;

    @media (min-width: $bp-lg-min) {
      width: 70px;
      height: auto;
    }
  }

  &__swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;

    @media (min-width: $bp-lg-min) {
      max-height: 600px;
    }
  }

  &__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;

    &._mini {
      height: 70px;
      width: 70px;
    }

    @media (min-width: $bp-lg-min) {
      max-width: 600px;
      max-height: 600px;
    }
  }
}
</style>

Codepen

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

[Алан Гибизов]

Прячьте длинные портянки кода под спойлер