Swiper Card Effect not working

[Christian-Vasilev]

I'm trying to get the Swiper card effect to work but with no success. I'm using Laravel + Vite with the core JS of Swiper.

I've followed the quick start guide and installed via NPM the package for Swiper.
After that I've add in app.js the following lines

import Swiper from "swiper";

let swiper = new Swiper(".swiper", {
    effect: "cards",
    grabCursor: true,
    initialSlide: 2,
    speed: 500,
    loop: true,
    rotate: true,
    mousewheel: {
        invert: false,
    },
});

In my app.css I've added the following lines:

.swiper {
    width: 240px;
    height: 320px;
}

.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

.swiper-slide:nth-child(1n) {
    background-color: rgb(206, 17, 17);
}

.swiper-slide:nth-child(2n) {
    background-color: rgb(0, 140, 255);
}

.swiper-slide:nth-child(3n) {
    background-color: rgb(10, 184, 111);
}

.swiper-slide:nth-child(4n) {
    background-color: rgb(211, 122, 7);
}

.swiper-slide:nth-child(5n) {
    background-color: rgb(118, 163, 12);
}

.swiper-slide:nth-child(6n) {
    background-color: rgb(180, 10, 47);
}

.swiper-slide:nth-child(7n) {
    background-color: rgb(35, 99, 19);
}

.swiper-slide:nth-child(8n) {
    background-color: rgb(0, 68, 255);
}

.swiper-slide:nth-child(9n) {
    background-color: rgb(218, 12, 218);
}

.swiper-slide:nth-child(10n) {
    background-color: rgb(54, 94, 77);
}

In the end in the HTML I've added the following structure:

          <!-- Swiper -->
          <div class="swiper mySwiper">
              <div class="swiper-wrapper">
                  <div class="swiper-slide">Slide 1</div>
                  <div class="swiper-slide">Slide 2</div>
                  <div class="swiper-slide">Slide 3</div>
                  <div class="swiper-slide">Slide 4</div>
                  <div class="swiper-slide">Slide 5</div>
                  <div class="swiper-slide">Slide 6</div>
                  <div class="swiper-slide">Slide 7</div>
                  <div class="swiper-slide">Slide 8</div>
                  <div class="swiper-slide">Slide 9</div>
              </div>
          </div>

And this is the end result:

Screen.Recording.2024-04-12.at.9.47.23.mov

I copied ready examples from codepen and they don't seem to work too.

This is what I've got in my Swiper's NPM directory in node_modules.

Am I importing something wrong or what?

I've also checked https://swiperjs.com/swiper-api#css-styles and tried to add the styles from there that are related to the cards, but I have no CSS folder in general in the package.