Swiper.js技术问题：向右滑动卡片消失，仅左滑可恢复

在项目中实现Swiper.js时遇到异常：向右滑动时卡片会消失，只有向左滑动才能重新显示。尝试调整卡片间距后仍未解决问题，附上对应的HTML、CSS和JavaScript代码，请问有人遇到过类似问题或知晓成因吗？恳请提供帮助！

HTML代码 #

<!-- 滑块主容器 -->
<div class="swiper flex flex-wrap justify-center gap-6 mt-8 mb-64 px-4 md:mt-0">
    <!-- 必需的额外包装器 -->
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="./políticas.html">
                <h3 class="text-2xl text-white mb-4">Public Policies</h3>
                <p class="text-base text-green-200">Understand the public policies that directly impact the Atlantic Forest and conservation actions.</p>
                <hr>
            </a>
        </div>
        <div class="swiper-slide">
            <h3 class="text-2xl text-white mb-4">Environmental Management</h3>
            <p class="text-base text-green-200">Learn about the practices and processes involved in sustainable management of this biome.</p>
        </div>
        <div class="swiper-slide">
            <h3 class="text-2xl text-white mb-4">Legislation</h3>
            <p class="text-base text-green-200">Discover the laws and regulations aimed at protecting the Atlantic Forest and its ecosystems.</p>
        </div>
        <div class="swiper-slide">
            <h3 class="text-2xl text-white mb-4">Conservation</h3>
            <p class="text-base text-green-200">Explore conservation initiatives and how we can preserve biodiversity.</p>
        </div>
    </div>
    <!-- 如需分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如需导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

CSS代码 #

.swiper-slide {
    background: rgba(0, 0, 0, 0.6); /* 半透明背景 */
    padding: 20px;
    border-radius: 8px;
    width: 100%; /* 修改为100%以确保幻灯片占满空间 */
    max-width: 300px; /* 设置卡片尺寸上限 */
    height: auto; /* 自动高度，由内容决定 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 0 15px; /* 卡片间距 */
}

.swiper-wrapper {
    display: flex; /* 保持弹性布局 */
    gap: 20px; /* 卡片间空隙 */
}

.swiper {
    height: 700px; /* 确保Swiper高度设置正确 */
}

JavaScript代码 #

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

内容的提问来源于stack exchange，提问作者かAngelftn_