Как предотвратить переполнение слайда на слайд -шоу Swiper (не показывать больше, чем желаемое количество слайдов) ⇐ CSS

[Anonymous]

Проблема: My Swiper Slideshow отображает столько слайдов, сколько может соответствовать на экране, а не придерживаться количества слайдов, указанных в настройках. Я хочу отобразить один слайд на экранах меньше 1024px и три слайда на экранах 1024px или больше. Например, на моем ноутбуке я вижу три слайда вместе с половиной четвертого. На Mobile я получаю один слайд и части двух других, что делает экран слишком переполненным. Я хочу убедиться, что только один или три слайда отображаются за раз. Последующие слайды, даже при навигации к ним. . Любой совет приветствуется.
document.querySelectorAll('.swiper-container').forEach(container => {
const id = container.getAttribute('data-id');

new Swiper(`.swiper-container-${id}`, {
loop: true,
autoHeight: true,
navigation: {
nextEl: `.swiper-button-next-${id}`,
prevEl: `.swiper-button-prev-${id}`,
},
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 30
},
1024: {
slidesPerView: 3,
slidesPerGroup: 3,
spaceBetween: 40
}
}
});
});


html:




Badge



Title









Slide 1

Text

• 1
• 2
• 3

Slide 2

Text

• 1
• 2
• 3

Slide 3

Text

• 1
• 2
• 3

css:
.swiper-button-next {
width: 40px;
height: 40px;
background-color: #171347;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, transform 0.3s;
box-sizing: content-box;
}
.swiper-button-prev {
margin-right: 2rem;
}
.swiper-button-next {
margin-left: 2rem;
}
.swiper-container {
padding: 0 4rem;
width: 100%;
height: auto;
overflow: hidden;
}
.swiper-button-prev::after,
.swiper-button-next::after {
font-size: 16px;
font-weight: bold;
color: #fff;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
background-color: #0056b3;
transform: scale(1.1);
}
@media (max-width: 768px) {
.swiper-button-prev,
.swiper-button-next {
width: 35px;
height: 35px;
}
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... e-than-the