«Проблема с Swiper.js: карточки исчезают при смахивании вправо» ⇐ CSS

[Anonymous]

У меня возникла проблема при внедрении Swiper.js в мой проект. Когда я смахиваю вправо, карточки исчезают и появляются снова только тогда, когда я смахиваю влево. Я не могу понять, что может быть причиной этой проблемы.
Вот HTML, CSS и JS:
html:

Код: Выделить всё

[url=./políticas.html]
Public Policies
Understand the public policies that directly impact the Atlantic Forest and conservation actions.

[/url]

Environmental Management
Learn about the practices and processes involved in sustainable management of this biome.

Legislation
Discover the laws and regulations aimed at protecting the Atlantic Forest and its ecosystems.

Conservation
Explore conservation initiatives and how we can preserve biodiversity.

CSS:

Код: Выделить всё

.swiper-slide {
background: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
padding: 20px;
border-radius: 8px;
width: 100%; /* Change to 100% to ensure the slides take the full space */
max-width: 300px; /* Set a limit for the size of the card */
height: auto; /* Automatic height to let content dictate size */
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin: 0 15px; /* Margin to space out the slides */
}

.swiper-wrapper {
display: flex; /* Maintain this for flexible layout */
gap: 20px; /* Space between cards */
}

.swiper {
height: 700px; /* Ensure swiper height is set correctly */
}

Javascript

Код: Выделить всё

var swiper = new Swiper('.swiper', {
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
},
});

Кто-нибудь сталкивался с подобной проблемой или знает, что может быть причиной такого поведения? Буду очень признателен за любую помощь!
Я пробовал изменить расстояние между карточками, но это ничего не помогло.

Подробнее здесь: https://stackoverflow.com/questions/790 ... ping-right