“Swiper.js 的问题：向右滑动时卡片消失

Question

我在项目中实现 Swiper.js 时遇到问题。当我向右滑动时，卡片就会消失，只有当我向左滑动时它们才会重新出现。我不明白是什么导致了这个问题。

这是 html、css 和 JS：

html:

<!-- Slider main container -->
<div class="swiper flex flex-wrap justify-center gap-6 mt-8 mb-64 px-4 md:mt-0">
    <!-- Additional required wrapper -->
    <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>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

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',
    },
});

有人遇到过类似的问题或知道是什么导致了这种行为吗？任何帮助将不胜感激！

我尝试改变卡片之间的间隙，但没有解决任何问题。

Answer 1

那是因为你的

.swiper-slide

和

max-width: 300px

太小了。从

max-width

中删除

.swiper-slide

或将

width

添加到

.swiper

。

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

.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 */
    width: 375px /* added width */
}

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Slider main container -->
<div class="swiper flex flex-wrap justify-center gap-6 mt-8 mb-64 px-4 md:mt-0">
    <!-- Additional required wrapper -->
    <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>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>