i want to add a simple swiper on my nextjs website (v13 with app router) but it's giving me all types of errors.

我想在我的Nextjs网站上添加一个简单的快捷键(带有应用程序路由器的V13)，但它给了我所有类型的错误。

First i tried importing it like i always do by copying it from a demo listed on their website and it was showing up fine but the navigation buttons weren't working.

首先，我试着像往常一样导入，从他们网站上列出的一个演示中复制过来，它显示得很好，但导航按钮不起作用。

So i did more research and found out they released a new version (v10) and are recommending using only the Swiper Element for all future projects but i don't understand how i'm supposed to import it on nextjs.

所以我做了更多的研究，发现他们发布了一个新版本(V10)，并建议在未来的所有项目中只使用Swiper元素，但我不明白我应该如何在Nextjs上导入它。

I tried downgrading it to v9.4.1 and repeating the usual process i've always done but now the whole component is flickering for some reason...

我试着把它降级到v9.4.1，并重复我一直做的通常过程，但现在整个组件因为某种原因而闪烁……

i don't know what to do, can anyone explain to me how to import the Swiper Element component to nextjs or help me find out why it's flickering on the older version?

我不知道该怎么做，有谁能解释一下如何将Swiper Element组件导入到Nextjs中，或者帮我找出为什么它在旧版本上闪烁？

here's the code for v9.4.1 with the React import:

下面是带有React导入的v9.4.1的代码：

"use client";
import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";

import "../styles/globals.css";

// import required modules
import { Navigation } from "swiper";

export default function SwiperComponent() {
  return (
    <>
      <Swiper navigation={true} modules={[Navigation]} className="mySwiper">
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
        <SwiperSlide>Slide 6</SwiperSlide>
        <SwiperSlide>Slide 7</SwiperSlide>
        <SwiperSlide>Slide 8</SwiperSlide>
        <SwiperSlide>Slide 9</SwiperSlide>
      </Swiper>
    </>
  );
}

this is globals.css:

这是global als.css：

#app {
  height: 100%;
}
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

and this is how it looks in package.json:

这是它在Package.json中的外观：

  "dependencies": {
    "@types/node": "20.6.0",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "eslint": "8.49.0",
    "eslint-config-next": "13.4.19",
    "hamburger-react": "^2.5.0",
    "next": "13.4.19",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-icons": "^4.11.0",
    "swiper": "^9.4.1",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  }
}

this is how i'm importing it on the page:

这就是我在页面上导入它的方式：

<main className="text-black md:max-w-[1200px] md:m-auto bg-white font-kumbh h-screen flex flex-col pt-[110px] md:pt-auto z-[0]  relative align-middle items-center justify-center md:w-[95%]">
      <div className="flex md:flex-row flex-col md:gap-[6vw] gap-5  items-center align-middle h-fit justify-center">
        <section className="w-full md:w-1/2 z-[0] relative">
          <SwiperComponent />
        </section>
      </div>
</main>

I think the navigation buttons didn't work because you import it wrong.
The correct one:

我认为导航按钮不工作，因为你导入错误。正确的一个：

import { Navigation } from 'swiper/modules';