Недавно начал изучать вёрстку, но столкнулся с такой проблемой: На десктопной версии всё работает отлично, а вот при ширине <992px, где отображается один слайд, слайдер листается криво.
HTML
<section id="objects" class="objects">
<div class="container">
<div class="objects-content">
<h2 class="title title-center">Примеры наших объектов</h2>
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="slide__image" src="/img/objects/1.jpg" alt="image" />
<h4 class="slide__name">Название объекта</h4>
</div>
<div class="swiper-slide">
<img class="slide__image" src="/img/objects/2.jpg" alt="image" />
<h4 class="slide__name">Название объекта</h4>
</div>
<div class="swiper-slide">
<img class="slide__image" src="/img/objects/3.jpg" alt="image" />
<h4 class="slide__name">Название объекта</h4>
</div>
</div>
</div>
</div>
</section
CSS
.objects {
overflow: hidden;
margin-bottom: 220px;
&-content {
overflow: hidden;
width: 100%;
}
}
.swiper {
max-width: 100%;
max-height: 350px;
&-wrapper {
height: 410px;
width: 100%;
}
&-slide {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
}
.slide {
&__image {
width: 100%;
height: 100%;
object-fit:cover;
}
&__name {
font-weight: 600;
color: #073F6D;
}
}
.title {
&-center {
text-align: center;
}
}
JS
new Swiper('.objects-content', {
grabCursor: true,
spaceBetween: 30,
loop: true,
slidesPerView: 3,
autoplay: {
delay: 3000,
disableOnInteraction: false,
}
});
window.addEventListener('resize', move);
function move(){
const viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
if (viewport_width <= 992) {
new Swiper('.objects-content', {
slidesPerView: 1,
});
}
}
move();
Буду максимально благодарен за помощь :)
вверх
напротив моего ответа)