JS + CSS Flipcards Breaking Swiper JS

I am currently trying to implement a simple card flip animation to a SwiperJS carousel for a personal website.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var swiper = new Swiper(".slideContent", {
    slidesPerView: 3,
    spaceBetween: 30,
    centeredSlides: true,
    fade: 'true',
    variableWidth: 'true',
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      dynamicBullets: true,
    },

    breakpoints: {
      0: {
        slidesPerView: 1,
      },

      520: {
        slidesPerView: 2,
      },

      950: {
        slidesPerView: 3,
      },

    },
  });

const button = document.querySelector('.eastButton');
const buttonBack = document.querySelector('.eastButtonBack');
const card = document.querySelector('.cardInner');


button.addEventListener('click', function() {
  card.classList.toggle('is-flipped');
});

buttonBack.addEventListener('click', function() {
  card.classList.toggle('is-flipped');
});


const button2 = document.querySelector('.fogesButton');
const buttonBack2 = document.querySelector('.fogesButtonBack');
const card2 = document.querySelector('.cardInner2');

button2.addEventListener('click', function() {
  card2.classList.toggle('is-flipped');
});

buttonBack2.addEventListener('click', function() {
  card2.classList.toggle('is-flipped');
});

const button3 = document.querySelector('.sephButton');
const buttonBack3 = document.querySelector('.sephButtonBack');
const card3 = document.querySelector('.cardInner3');

button3.addEventListener('click', function() {
  card3.classList.toggle('is-flipped');
});

buttonBack3.addEventListener('click', function() {
  card3.classList.toggle('is-flipped');
});

const button4 = document.querySelector('.davidButton');
const buttonBack4 = document.querySelector('.davidButtonBack');
const card4 = document.querySelector('.cardInner4');

button4.addEventListener('click', function() {
  card4.classList.toggle('is-flipped');
});

buttonBack4.addEventListener('click', function() {
  card4.classList.toggle('is-flipped');
});

<!-- language: lang-css -->

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    height: 100%;
    width: 100%;
    color: #fff;
    background: #000;
}


.bodyContainer {
    min-height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(/images/Texture_BG.jpg);
}

.slideContainer {
    max-width: 1120px;
    min-width: 560px;
    width: 100%;
    padding: 40px 0;
}

.slideContent {
    margin: 0 40px;
    overflow: hidden;
    border-radius: 25px;
}

.card {
    width: 300px;
    border-radius: 25px;
    background-color: #121212;

}

.cardInner {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: absolute;
}


.cardInner.is-flipped {
    transform: rotateY(180deg);
}

.cardFace {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 25px;
    box-shadow: 0px 0px 10px 0px #2c2c2c;
}


.frontFace {
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    background-color: #121212;
}



.imageContent, .cardContent {
    display: flex;  
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
}

.imageContent {
    position: relative;
    row-gap: 5px;
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #121212;
    border-radius: 25px 25px 25px 25px;
}

.cardImg {
    position: relative;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    margin: 10px;
}


.cardImg .avatarImg {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
    border: 2px solid #000;
}

.name {
    font-size: 30px;
    font-weight: 500;
    color: #fff;
    margin: 10px;
}

.button{
    border: none;
    font-size: 22px;
    color: #fff;
    padding: 8px 16px;
    background-color: #2c2c2c;
    border-radius: 8px;
    margin: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.button:hover {
    background: #454545;
}


.backFace {
    display: flex;
    position: relative;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    background-color: #121212;
    transform: rotateY(180deg);
}

.nameBack {
    font-size: 30px;
    font-weight: 500;
    color: #fff;
    margin: 10px;
    opacity: 0;
}


.cardInner2 {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: absolute;
}


.cardInner2.is-flipped {
    transform: rotateY(180deg);
}


.cardInner3 {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: absolute;
}


.cardInner3.is-flipped {
    transform: rotateY(180deg);
}

.cardInner4 {
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: absolute;
}


.cardInner4.is-flipped {
    transform: rotateY(180deg);
}

<!-- language: lang-html -->

<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
</head>
<div class="bodyContainer">
<div class="slideContainer swiper">
<div class="slideContent">
<div class="cardWrapper swiper-wrapper">
<div class="card swiper-slide" id="eastCard">
<div class="cardInner">
<div class="cardFace frontFace">
<div class="imageContent">
<span class="overlay"></span>
<div class="cardImg">
<img src="https://media.istockphoto.com/id/153435914/vector/crying-clown.jpg?s=612x612&w=0&k=20&c=LVdIuvtyrDWh1sTERNIh5HF0wtWFNU2ZtpJXa8vhOUA=" alt="" class="avatarImg">
</div>
</div>
<div class="cardContent">
<h2 class="name"> 1 </h2>
<button class="button eastButton" > More </button>
</div>
</div>
<div class="cardFace backFace">
<div class="imageContent">
<span class="overlay"></span>
<div class="cardImg">
<img src="https://media.istockphoto.com/id/153435914/vector/crying-clown.jpg?s=612x612&w=0&k=20&c=LVdIuvtyrDWh1sTERNIh5HF0wtWFNU2ZtpJXa8vhOUA=" alt="" class="avatarImg">
</div>
</div>
<div class="cardContent">
<h2 class="nameBack"> East </h2>
<button class="button eastButtonBack" > Back </button>
</div>
</div>
</div>
</div>
<div class="card swiper-slide" id="fogesCard">
<div class="cardInner2">
<div class="cardFace frontFace">
<div class="imageContent">
<span class="overlay"></span>
<div class="cardImg">
<img src="https://media.istockphoto.com/id/153435914/vector/crying-clown.jpg?s=612x612&w=0&k=20&c=LVdIuvtyrDWh1sTERNIh5HF0wtWFNU2ZtpJXa8vhOUA=" alt="" class="avatarImg">
</div>
</div>
<div class="cardContent">
<h2 class="name"> 2 </h2>
<button class="button fogesButton" > More </button>
</div>
</div>
<div class="cardFace backFace">
<div class="imageContent">
<span class="overlay"></span>
<div class="cardImg">
<img src="https://media.istockphoto.com/id/153435914/vector/crying-clown.jpg?s=612x612&w=0&k=20&c=LVdIuvtyrDWh1sTERNIh5HF0wtWFNU2ZtpJXa8vhOUA=" alt="" class="avatarImg">
</div>
</div>
<div class="cardContent">
<h2 class="nameBack"> Foges </h2>
<button class="button fogesButtonBack" > Back </button>
</div>
</div>
</div>
</div>
<div class="card swiper-slide" id="sephCard">
<div class="cardInner3">
<div class="cardFace frontFace">
<div class="imageContent">
<span class="overlay"></span>
<div class="cardImg">
<img src="https://media.istockphoto.com/id/153435914/vector/crying-clown.jpg?s=612x612&w=0&k=20&c=LVdIuvtyrDWh1sTERNIh5HF0wtWFNU2ZtpJXa8vhOUA=" alt="" class="avatarImg">
</div>
</div>
<div class="cardContent">
<h2 class="name"> 3 </h2>
<button class="button sephButton" > More </button>
</div>
</div>
<div class="cardFace backFace">
<div class="imageContent">
<span class="overlay"></span>
<div class="cardImg">
<img src="https://media.istockphoto.com/id/153435914/vector/crying-clown.jpg?s=612x612&w=0&k=20&c=LVdIuvtyrDWh1sTERNIh5HF0wtWFNU2ZtpJXa8vhOUA=" alt="" class="avatarImg">
</div>
</div>
<div class="cardContent">
<h2 class="nameBack"> Seph Nomad </h2>
<button class="button sephButtonBack" > Back </button>
</div>
</div>
</div>
</div>
<div class="card swiper-slide" id="davidCard">
<div class="cardInnerNA">
<div class="cardFace frontFace">
<div class="imageContent">
<span class="overlay"></span>
<div class="cardImg">
<img src="https://media.istockphoto.com/id/153435914/vector/crying-clown.jpg?s=612x612&w=0&k=20&c=LVdIuvtyrDWh1sTERNIh5HF0wtWFNU2ZtpJXa8vhOUA=" alt="" class="avatarImg">
</div>
</div>
<div class="cardContent">
<h2 class="name"> 4 </h2>
<button class="button davidButton" > More </button>
</div>
</div>
<div class="cardFace backFace">
<div class="imageContent">
<span class="overlay"></span>
<div class="cardImg">
<img src="https://media.istockphoto.com/id/153435914/vector/crying-clown.jpg?s=612x612&w=0&k=20&c=LVdIuvtyrDWh1sTERNIh5HF0wtWFNU2ZtpJXa8vhOUA=" alt="" class="avatarImg">
</div>
</div>
<div class="cardContent">
<h2 class="nameBack"> Seph Nomad </h2>
<button class="button davidButtonBack" > Back </button>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>

<!-- end snippet -->

For some reason, every card but the last one in the carousel I got to work with only minor formatting issues.

Attempting to apply the card flip css to the last card in the carousel makes the entire swiper disappear into the overflow.

Changing the div cardInnerNA to cardInner4 which links it to the corresponding css will demonstrate how the entire thing breaks.

I tried messing around with the position aspects and adding z-index but nothing gave me a clean fix without causing a multitude of other formatting issues.

I am completely new to web design so feel free to point out any mistakes or at least give me advice on how I could go about tracing back and correcting this issue.

I came up with a simple but not completely clean workaround for this issue.

I added a 5th "card swiper-slide" div with id ="invisibleCard"

<div class="card swiper-slide" id="invisibleCard">
<div class="cardInner5">
<div class="cardFace frontFace">
<div class="imageContent">
<span class="overlay"></span>
<div class="cardImg">
<img src="https://media.istockphoto.com/id/153435914/vector/crying-clown.jpg?s=612x612&w=0&k=20&c=LVdIuvtyrDWh1sTERNIh5HF0wtWFNU2ZtpJXa8vhOUA=" alt="" class="avatarImg">
</div>
</div>
<div class="cardContent">
<h2 class="name"> Invisible </h2>
<button class="button davidButton" > More </button>
</div>
</div>
<div class="cardFace backFace">
<div class="imageContent">
<span class="overlay"></span>
<div class="cardImg">
<img src="https://media.istockphoto.com/id/153435914/vector/crying-clown.jpg?s=612x612&w=0&k=20&c=LVdIuvtyrDWh1sTERNIh5HF0wtWFNU2ZtpJXa8vhOUA=" alt="" class="avatarImg">
</div>
</div>
<div class="cardContent">
<h2 class="nameBack"> 4 </h2>
<button class="button davidButtonBack" > Back </button>
</div>
</div>
</div>
</div>

This is just a copy-paste of the structure of the previous cards but then I styled it

#invisibleCard {
opacity: 0;
}

to make it invisible.

Fixed version

JSFiddle

This is the only fix I can think of for now but if someone discovers a better way please let me know!