Добрый день.
Помогите настроить swiper((
Дело в том что на десктопе все нормально, а вот как только начинаешь уменьшать экран до 768рх , слайдер начинает работать не праильно. Колличество слайдов не уменьшается, слайды начинают идти паровозиком пока не закончаться и за тем пустое пространство , потом опять по кругу.
Помогите разобраться. Спасибо!
const swiper = new Swiper('.swiper-container', {
loop: true,
spaceBetween: 20,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
scrollbar: {
el: '.swiper-scrollbar',
},
breakpoints: {
310: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 3,
},
},
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
} );
.swiper-container {
width: 100%;
height: 100%;
}
@media (max-width: 1090px) {
.swiper-container {
width: 980px;
}
}
@media (max-width: 768px) {
.swiper-container {
width: 728px;
}
}
@media (max-width: 450px) {
.swiper-container {
width: 350px;
}
}
@media (max-width: 360px) {
.swiper-container {
width: 300px;
}
}
<div class="articles_slider swiper-container">
<div class="articles__wrapper swiper-wrapper">
<div class="articles__column swiper-slide">
<img src="./img/articles_img/1.jpg" alt="img" class="articles__img">
<p class="articles__column-title">Особенности работы Инстаграм</p>
<p class="articles__column-autor">Автор: Анастасия Кузнецова</p>
<p class="articles__column-date">07.12.2020</p>
<a href="" class="articles__column-link">Подробнее</a>
</div>
<div class="articles__column swiper-slide">
<img src="./img/articles_img/2.jpg" alt="img" class="articles__img">
<p class="articles__column-title">Как найти хорошего СММ-специалиста</p>
<p class="articles__column-autor">Автор: Анастасия Кузнецова</p>
<p class="articles__column-date">07.12.2020</p>
<a href="" class="articles__column-link">Подробнее</a>
</div>
<div class="articles__column swiper-slide">
<img src="./img/articles_img/3.jpg" alt="img" class="articles__img">
<p class="articles__column-title">Бизнес в Инстаграм. Как быстро раскрутить аккаунт</p>
<p class="articles__column-autor">Автор: Анастасия Кузнецова</p>
<p class="articles__column-date">07.12.2020</p>
<a href="" class="articles__column-link">Подробнее</a>
</div>
<div class="articles__column swiper-slide">
<img src="./img/articles_img/1.jpg" alt="img" class="articles__img">
<p class="articles__column-title">Особенности работы Инстаграм</p>
<p class="articles__column-autor">Автор: Анастасия Кузнецова</p>
<p class="articles__column-date">07.12.2020</p>
<a href="" class="articles__column-link">Подробнее</a>
</div>
</div>
</div>
