2022-07-26 工作记录--React-swiper@6以上的使用_swiper/react官网

React-swiper@6以上的使用

一、官方文档 ⭐️

（一）、查看对应参数

第1步、进入swiper官网

选择「中文教程」下的「在React中使用Swiper」，如下图：

第2步、查看Demos

滑动到最下方，按如下图点击操作：

第3步、进入如下图页面查看对应参数

（二）、查看对应方法

链接：https://swiperjs.com/swiper-api#method-swiper-slidePrev

二、安装swiper ⭐️

先观察package.json中是否安装了swiper：

• 未安装滴话，就在终端输入：npm i swiper@6 或者 yarn add swiper@6
  • @6：限制安装的swiper版本为6.0（若想安装最新版本，省略即可）
• 已安装滴话，就无需操作上述步骤；

三、引入swiper ⭐️

1、在对应页面的jsx中输入以下代码：

import { Swiper, SwiperSlide } from "swiper/react"; // 引入swiper,实现轮播
import 'style-loader!css-loader!swiper/swiper-bundle.css'; // 引入swiper的css
1
2

若出现报错