第一步、安装
npm i swiper
第二步、使用
import { Swiper, SwiperSlide } from 'swiper/react';
//根据自己的需要引用样式
import 'swiper/swiper.less';
export default () => {
return (
<Swiper
spaceBetween={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]);
// 组件上添加属性
<Swiper
spaceBetween={50}
slidesPerView={1}
navigation
style={{ padding: "24px" }}
>
以上就是在react中使用swiper插件。