Есть флекс контейнер. Внутри два элемента. Внутри каждого слайдер swiper, один из которых является thumbs(превью) для другого. На планшетных разрешениях контейнер складывается в flex-direction: column-reverse;
и в этот момент свайпер ломается, начинает растягивать слайды.
Проблема распостраненная, раньше всегда решалось через min-width: 0
для флекс элемента, в этот раз не работает.
Пробовал отключать флекс, пробовал min-height
, перепробовал уже всё, что приходит в голову - ничего не работает.
if (document.querySelector('.main-product__slider')) {
// Проверяем, есть ли слайдер на стронице
// Создаем слайдер
new Swiper('.main-product__slider', { // Указываем скласс нужного слайдера
// Подключаем модули слайдера
// для конкретного случая
modules: [ Navigation, Autoplay, EffectFade, Thumbs ],
observer: true,
observeParents: true,
slidesPerView: 1,
spaceBetween: 10,
// autoHeight: true,
speed: 800,
//touchRatio: 0,
//simulateTouch: false,
loop: true,
//preloadImages: false,
//lazy: true,
// Эффекты
// effect: 'fade',
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
// Пагинация
// pagination: {
// el: '.slider-hero__pagination',
// clickable: true,
// },
// Скроллбар
/*
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
*/
// Кнопки "влево/вправо"
navigation: {
prevEl: '.preview-product__arrow_prev',
nextEl: '.preview-product__arrow_next',
},
thumbs: {
swiper: {
el: '.preview-product__slider',
slidesPerView: 6,
spaceBetween: 10,
autoHeight: true,
speed: 800,
direction: 'vertical',
// centeredSlides: true,
//touchRatio: 0,
//simulateTouch: false,
loop: true,
//preloadImages: false,
//lazy: true,
/*
// Эффекты
effect: 'fade',
*/
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
// Пагинация
// pagination: {
// el: '.slider-hero__pagination',
// clickable: true,
// },
// Скроллбар
/*
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
},
*/
// Брейкпоинты
breakpoints: {
320: {
slidesPerView: 5,
direction: 'horizontal',
},
992: {
slidesPerView: 6,
direction: 'vertical',
},
},
}
},
// События
on: {
}
});
}
.product__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 1.25rem;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
min-width: 0;
min-height: 0;
}
.slider-product {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-width: 0;
min-height: 0;
}
@supports (gap: clamp( 0.625rem , 0.4144736842rem + 1.0526315789vw , 1.25rem )) {
.slider-product {
gap: clamp( 0.625rem , 0.4144736842rem + 1.0526315789vw , 1.25rem );
}
}
@supports not (gap: clamp( 0.625rem , 0.4144736842rem + 1.0526315789vw , 1.25rem )) {
.slider-product {
gap: calc(0.625rem + 0.625 * (100vw - 20rem) / 59.375);
}
}
.slider-product__preview {
-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
}
@supports (flex-basis: clamp( 3.125rem , 2.5355263158rem + 2.9473684211vw , 4.875rem )) {
.slider-product__preview {
-ms-flex-preferred-size: clamp( 3.125rem , 2.5355263158rem + 2.9473684211vw , 4.875rem );
flex-basis: clamp( 3.125rem , 2.5355263158rem + 2.9473684211vw , 4.875rem );
}
}
@supports not (flex-basis: clamp( 3.125rem , 2.5355263158rem + 2.9473684211vw , 4.875rem )) {
.slider-product__preview {
-ms-flex-preferred-size: calc(3.125rem + 1.75 * (100vw - 20rem) / 59.375);
flex-basis: calc(3.125rem + 1.75 * (100vw - 20rem) / 59.375);
}
}
.slider-product__main {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.preview-product {
position: relative;
min-height: 0;
min-width: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.preview-product__slider {
overflow: hidden;
min-height: 0;
}
.preview-product__slide {
padding: 0.625rem;
border-radius: 0.375rem;
border: 1px solid #E6E6E6;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
opacity: 0.5;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.preview-product__slide.swiper-slide-thumb-active {
opacity: 1;
}
.preview-product__slide.swiper-slide-thumb-active:hover::before {
opacity: 0;
}
.preview-product__slide img {
width: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.preview-product__slide::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
background-image: url(../img/icons/loopa.svg);
background-repeat: no-repeat;
background-position: center;
opacity: 0;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.preview-product__navigation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
pointer-events: none;
}
.preview-product__arrow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
pointer-events: all;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.preview-product__arrow_prev {
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.main-product {
min-width: 0;
min-height: 0;
position: relative;
}
.main-product__slider {
min-width: 0;
min-height: 0;
}
.main-product__slide img {
width: 100%;
}
.main-product__credit {
position: absolute;
display: inline-block;
top: 0;
left: 0;
}
<link href="https://unpkg.com/swiper@8/swiper-bundle.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/swiper@8/swiper-bundle.esm.browser.min.js"></script>
<div class="product__slider slider-product">
<div class="slider-product__preview preview-product">
<div class="preview-product__slider swiper">
<div class="preview-product__wrapper swiper-wrapper">
<div class="preview-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
<div class="preview-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
<div class="preview-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
<div class="preview-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
<div class="preview-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
<div class="preview-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
</div>
<div class="preview-product__navigation">
<div class="preview-product__arrow preview-product__arrow_prev">
<img src="@img/icons/seall_arrow.svg" alt="arrow">
</div>
<div class="preview-product__arrow preview-product__arrow_next">
<img src="@img/icons/seall_arrow.svg" alt="arrow">
</div>
</div>
</div>
</div>
<div class="slider-product__main main-product">
<div class="main-product__slider swiper">
<div class="main-product__wrapper swiper-wrapper">
<div class="main-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
<div class="main-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
<div class="main-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
<div class="main-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
<div class="main-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
<div class="main-product__slide swiper-slide">
<img src="http://o97756rf.beget.tech/img/home/slider.png" alt="slide">
</div>
</div>
</div>
<div class="main-product__credit">
<div class="slide-homeslider__credit">
Кредит 0%
</div>
</div>
</div>
</div>