第一步、安裝

npm i swiper

第二步、使用

import { Swiper, SwiperSlide } from 'swiper/react'; //根據自己的需要引用樣式 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>); };

到這一個輪播圖就已經實現了，但是只是輪播圖沒有別的東西，比如左右的按鈕。這些需要我們手動添加。

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。