<div class="product__img">
<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 {
}
.product__item img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
.product__item-2 {
}
.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",
});