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