Эффект карт Laravel Vite + SwiperJs не отображается должным образом

Я пытаюсь заставить работать эффект карты Swiper, но безуспешно. Я использую Laravel + Vite с ядром JS Swiper.

Я следовал краткому руководству и установил через NPM пакет для Swiper. После этого я добавил app.js следующие строки

импортировать Swiper из «swiper»;

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

В свой app.css я добавил следующие строки:

.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);
}

В конце в HTML я добавил следующую структуру:

          <!-- 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>

И вот конечный результат:

https://github.com/nolimits4web/swiper/assets/32356067/66e96e8d-590b-4f6c-a696-a9bb4375b3ab

Я скопировал готовые примеры из codepen, и они тоже не работают.

Вот что у меня есть в каталоге NPM моего Swiper в node_modules.

Я импортирую что-то не так или что?

Я также проверил https://swiperjs.com/swiper-api#css-styles и попробовал добавить оттуда стили, связанные с карточками, но у меня в пакете вообще нет папки CSS.