第一步、安裝

npm i swiper

第二步、使用

import { Swiper, SwiperSlide } from 'swiper/react'; //根據(jù)自己的需要引用樣式 import 'swiper/swiper.less';export default () => {return (<SwiperspaceBetween={50}slidesPerView={3}onSlideChange={() => console.log('slide change')}onSwiper={(swiper) => console.log(swiper)}><SwiperSlide>Slide 1</SwiperSlide><SwiperSlide>Slide 2</SwiperSlide><SwiperSlide>Slide 3</SwiperSlide><SwiperSlide>Slide 4</SwiperSlide></Swiper>); };

到這一個(gè)輪播圖就已經(jīng)實(shí)現(xiàn)了，但是只是輪播圖沒(méi)有別的東西，比如左右的按鈕。這些需要我們手動(dòng)添加。

第三步、添加功能（例：navigation按鈕）

//引入所需功能和樣式文件 import SwiperCore, { Navigation } from "swiper"; import "swiper/components/navigation/navigation.less";//使用 SwiperCore.use([Navigation]);// 組件上添加屬性<SwiperspaceBetween={50}slidesPerView={1}navigationstyle={{ padding: "24px" }}>

以上就是在react中使用swiper插件。

總結(jié)

以上是生活随笔為你收集整理的react 中使用Swiper轮播图插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。