<div class="slider">
  <div class="swiper-container slider__thumbs">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st4/fit/0/0/027eb60a55265a496069a65896546c78/6c46034180c067af244e15abca8fe0490413b6f8c2c9c067cfb11b3527cbcfd1.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st1/fit/wm/2000/2000/b38c06b180dc2217fa470ad9b3231d7e/26542d46b9087a16924f8ddac7a736cfd05bb06ba4de1bf64907c2ccf0cd08fa.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st1/fit/wm/2000/2000/cf5eaa774d7d548036173e318cddb9c7/8b0ed182c83dae361249bb5830b8dfd9cec6c2c5fc2038a1ee64ebdb086d911d.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st4/fit/wm/2000/2000/c7bb66064cae2dc169c2fadcd9fe57e2/d251840652dfd09a6564b93f6bde08b337bd9a9afa40a98557aa0500b52cf362.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st4/fit/wm/2000/2000/cbe2cbbe283d0751160ad3660f47bceb/e686ad57f9e3ef75fd388f588c1d944b1358b4f745f0f6992a3bbadd3c48dbd9.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st1/fit/wm/2000/2000/d82adf28f9420a20b9caf7b4e4b67284/d823e3b842242a9e506fbc8b239cfdf1bcab67a01086ccdf601a38564c160cec.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st4/fit/wm/2000/2000/bcc56060aaf6a3bfeaf9569bfab94faf/214a48fc9ac8175fdec7f433c2e52f2e85851cdb0c77ef4dc6d15db4c3efb234.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st1/fit/wm/2000/2000/eb9bbb6ad15385aca793c9cd6ecf1735/d911ce97579ce8a4499dca11da426ce3d92b6b19924dfa71cbe557d41dc08c5c.jpg" alt="">
      </div>
    </div>
  </div>
  <div class="swiper-container slider__main">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st4/fit/0/0/027eb60a55265a496069a65896546c78/6c46034180c067af244e15abca8fe0490413b6f8c2c9c067cfb11b3527cbcfd1.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st1/fit/wm/2000/2000/b38c06b180dc2217fa470ad9b3231d7e/26542d46b9087a16924f8ddac7a736cfd05bb06ba4de1bf64907c2ccf0cd08fa.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st1/fit/wm/2000/2000/cf5eaa774d7d548036173e318cddb9c7/8b0ed182c83dae361249bb5830b8dfd9cec6c2c5fc2038a1ee64ebdb086d911d.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st4/fit/wm/2000/2000/c7bb66064cae2dc169c2fadcd9fe57e2/d251840652dfd09a6564b93f6bde08b337bd9a9afa40a98557aa0500b52cf362.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st4/fit/wm/2000/2000/cbe2cbbe283d0751160ad3660f47bceb/e686ad57f9e3ef75fd388f588c1d944b1358b4f745f0f6992a3bbadd3c48dbd9.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st1/fit/wm/2000/2000/d82adf28f9420a20b9caf7b4e4b67284/d823e3b842242a9e506fbc8b239cfdf1bcab67a01086ccdf601a38564c160cec.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st4/fit/wm/2000/2000/bcc56060aaf6a3bfeaf9569bfab94faf/214a48fc9ac8175fdec7f433c2e52f2e85851cdb0c77ef4dc6d15db4c3efb234.jpg" alt="">
      </div>
      <div class="swiper-slide">
        <img class="slider__img" src="https://c.dns-shop.ru/thumb/st1/fit/wm/2000/2000/eb9bbb6ad15385aca793c9cd6ecf1735/d911ce97579ce8a4499dca11da426ce3d92b6b19924dfa71cbe557d41dc08c5c.jpg" alt="">
      </div>
    </div>
  </div>
</div>

.slider {
  display: flex;
  
  &__thumbs {
    flex-shrink: 0;
    width: 97px;
    height: 428px;
    
    .swiper-slide {
      width: 97px;
      height: 100%;
      padding: 10px;
      border: 1px solid rgba(116, 140, 171, 0.3);
      border-radius: 15px;
      box-sizing: border-box;
      
      &.swiper-slide-thumb-active {
        border: 1px solid rgba(116, 140, 171, 1);
      }
      
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
      }
    }
  }
  
  &__main {
    width: 100%;
    height: 428px;
    margin: 0 50px;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }
  }
}

var main = new Swiper('.slider__main', {
  slidesPerView: 1,
  spaceBetween: 0,
  thumbs: {
    autoScrollOffset: 1,
    swiper: {
      el: '.slider__thumbs',
      slidesPerView: 5,
      spaceBetween: 19,
      direction: "vertical"
    }
  },
});