<div class="product__img">
<!--   <div class="product__block-slider">
    <div class="product__slider swiper-container">
      <div class="product__items swiper-wrapper">
        <a href="#img-1" data-fancybox="images" class="product__item _ibg swiper-slide">
          <img src="https://kartinkin.net/pics/uploads/posts/2022-07/1658377416_48-kartinkin-net-p-obezyana-s-granatoi-zhivotnie-krasivo-foto-52.jpg" alt="">
        </a>
        <a href="#img-2" data-fancybox="images" class="product__item _ibg swiper-slide">
          <img src="https://kartinkin.net/pics/uploads/posts/2022-07/1658377416_48-kartinkin-net-p-obezyana-s-granatoi-zhivotnie-krasivo-foto-52.jpg" alt="">
        </a>
        <a href="#img-3" data-fancybox="images" class="product__item _ibg swiper-slide">
          <img src="https://kartinkin.net/pics/uploads/posts/2022-07/1658377416_48-kartinkin-net-p-obezyana-s-granatoi-zhivotnie-krasivo-foto-52.jpg" alt="">
        </a>
      </div>
    </div>
  </div> -->
  
  <div class="product__block-slider-2">
    <div class="product__slider-2 swiper-container">
      <div class="product__items-2 swiper-wrapper">
        <div class="product__item-2 swiper-slide _ibg">
          <img src="https://kartinkin.net/pics/uploads/posts/2022-07/1658377416_48-kartinkin-net-p-obezyana-s-granatoi-zhivotnie-krasivo-foto-52.jpg" alt="">
        </div>
        <div class="product__item-2 swiper-slide _ibg">
          <img src="https://kartinkin.net/pics/uploads/posts/2022-07/1658377416_48-kartinkin-net-p-obezyana-s-granatoi-zhivotnie-krasivo-foto-52.jpg" alt="">
        </div>
        <div class="product__item-2 swiper-slide _ibg">
          <img src="https://kartinkin.net/pics/uploads/posts/2022-07/1658377416_48-kartinkin-net-p-obezyana-s-granatoi-zhivotnie-krasivo-foto-52.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</div>
.product__block {
  display: flex;
  gap: 30px;
}
.product__img {
  flex: 0 1 50%;
  min-height: 0;
  min-width: 0;
}
.product__block-slider {
}
.product__slider {
  overflow: hidden;
}
.product__items {
}
.product__item {
/*   padding-bottom: 80%; */
}
.product__item img {
/*   padding: 80px; */
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.product__item-2 {
/*   padding-bottom: 20%; */
}
.product__item-2 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.product__characteristic {
  flex: 0 1 50%;
}
.product__slider-2{
  max-height: 493px;
  overflow: hidden;
}
const mySwiper = new Swiper(".product__slider", {
  slidesPerView: 1,
  spaceBetween: 30,
  slidesPerGroup: 1,
  breakpoints: {
    992: {
      slidesPerView: 1,
      slidesPerGroup: 1
    }
  }
});
const mySwiperThree = new Swiper(".product__slider-2", {
  loop: true,
  slidesPerView: 1,
  slideToClickedSlide: true,
  spaceBetween: 27,
  slidesPerGroup: 1,
  direction: "vertical",
  // thumbs: {
  //   swiper: {
  //     el: ".product__slider",
  //     slidesPerView: 1,
  //     spaceBetween: 30,
  //     slidesPerGroup: 1
  //   }
  // }
});

External CSS

  1. https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js