react 中使用Swiper轮播图插件

第一步、安装

  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插件。