"Issue with Swiper.js: Cards Disappearing When Swiping Right

I am experiencing an issue while implementing Swiper.js in my project. When I swipe to the right, the cards disappear, and they only reappear when I swipe to the left. I can’t understand what might be causing this problem.

Here is the html, css and 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',
    },
});

Has anyone encountered a similar issue or knows what could be causing this behavior? Any help would be greatly appreciated!

I tried changing the gap between the cards, but it didn't solve anything.

It's because your .swiper-slide being too small with max-width: 300px. Remove max-width from .swiper-slide or add width to .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>