swiper 版本非常多，所以如果大家引入的资源如果报错或者找不着，那么必定是版本不对啦。

官网案例，如果找不到模块，那么就是版本不对的坑了。自己去node_module里面去看看文件是否存在。

安装 npm i swiper
案例安装的版本号是 "swiper": "^8.0.7",

import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
export default () => {
  return (
    <Swiper
      // install Swiper modules
      modules={[Navigation, Pagination, Scrollbar, A11y]}
      spaceBetween={50}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      scrollbar={{ draggable: true }}
      onSwiper={(swiper) => console.log(swiper)}
      onSlideChange={() => console.log('slide change')}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
      ...
    </Swiper>
  );
};

swiper react 官方文档。

api简单介绍

spaceBetween：间距；slidesPerView：展示几个滑块；onSlideChange滑动监听；
Navigation：就是左右两个耳朵，加了这个属性就会有样式，在modules对象数组里添加Navigation，会绑定事件和方法，控制左右切换。
pagination：就是下面的小圆点指示器，同理添加这个属性和对应的css，就会有样式出现，添加到modules对象数组里面就会绑定方法。
这里就是简单的介绍了，我用的swiper版本是8.0，react要16.8，有hooks的就行。
=========================================================

案例一 EffectCoverflow使用特效。

1650786959(1).jpg

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react"
import { Navigation, Pagination, EffectCoverflow, Autoplay } from "swiper"
// Import Swiper styles
import "swiper/css"
import "swiper/scss/navigation"
import "swiper/scss/pagination"
import "swiper/scss/effect-fade"
import styles from "./swiperComBox.module.scss"
// Navigation
export const SwiperComp = (props) => {
  return (
    <Swiper
      modules={[Navigation, Pagination, EffectCoverflow, Autoplay]}
      spaceBetween={50}
      autoplay={{
        delay: 2500,
        disableOnInteraction: false,
      }}
      slidesPerView={3}
      navigation
      pagination={{ clickable: true }}
      onSlideChange={() => {}}
      onSwiper={(swiper) => console.log(swiper)}
      className={styles.swiper}
      effect={"coverflow"}
      coverflowEffect={{
        rotate: 60,
        stretch: 1,
        depth: 20,
        modifier: 1,
        slideShadows: true,
      }}
    >
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
      <SwiperSlide className={styles.slide}>
        <img src={props.imgList[0]} alt=""></img>
      </SwiperSlide>
    </Swiper>
  )
}

引入样式文件
import styles from "./swiperComBox.module.scss"

.swiper {
  width: 80%;
  padding: 10%;
  .slide {
    img {
      width: 100%;
    }
  }
}

使用组件

import {SwiperComp} from "../../components/swiperComBox/swiperComBox"
//这里引用的路径自己写自己的，然后组件的使用也自己放到对应的地方  
//这里imgList属性是自己定义的props  图片路径也自己引入就可以展示了。
<SwiperComp imgList={[yitong.yitonghaoka]}></SwiperComp>

案例二 基础使用 Navigation Pagination

1650772353(1).jpg

// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react"
import { Navigation, Pagination } from "swiper"
import utils from "@/util"
import "./videoSwiper.scss"
// Import Swiper styles
import "swiper/css"
import "swiper/scss/navigation"
import "swiper/scss/pagination"
import "swiper/scss/effect-fade"

export  const SwiperComp = (props) => {
  const ClickVideo = (url) => {
    if (url) {
      setUrl(url)
    }
  }
  const { setUrl } = props
  const list = [
    { img: "", url: "https://musclefeel.oss-cn-beijing.aliyuncs.com/testDemo/demo.m3u8" },
    { img: "", url: "https://musclefeel.oss-cn-beijing.aliyuncs.com/video/2022-02-27/output2022_/output2022_.m3u8" },
    { img: "", url: "" },
    { img: "", url: "" },
    { img: "", url: "" },
    { img: "", url: "" },
    { img: "", url: "" },
  ]

  return (
    <Swiper modules={[Navigation, Pagination]} spaceBetween={60} slidesPerView={4} navigation pagination={{ clickable: true }} onSlideChange={() => console.log("slide change")} onSwiper={(swiper) => console.log(swiper)} className="swiper">
      {list.map((item, index) => {
        return (
          <SwiperSlide className="slide" onClick={()=>{
            ClickVideo(item.url)
          }} key={index}>
            <img src={props.imgList[0]} alt=""></img>
          </SwiperSlide>
        )
      })}
    </Swiper>
  )
}

上面的视频是用了Dpalyer 流媒体m3u8，有兴趣了解的可以私聊我。
具体的功能案例有地址，多看文档吧。

案例三

还没写。。
官网文档案例地址
再次注意，modules 里面要添加，属性要添加，引入要引入。有问题可以联系我~hhh