react中使用swiper_react swiper

---

简单介绍

作为轮播图的首选插件，swiper无疑是这方面专注性最强的。

但是，在使用时，每次都会遇到一个很*疼的问题：

就是把官网里的示例拿过来，并不能跑的通，而且不同版本之间，

使用起来 差别还挺大。

作为和框架契合前的最稳定版本swiper@5.4.5，

它使用简单，配置方便，所以这个版本依然是项目中的首选。

---

之前写过一篇在vue中使用swiper，和react中基本一致，配置完全相同，

https://blog.csdn.net/tuzi007a/article/details/122646552?spm=1001.2014.3001.5501

本篇就是该基础上写的。所以本篇中的配置部分会略掉。

---

swiper@5.4.5的基本使用

如果是在项目中简单使用一下轮播图，我依然推荐使用该版本。

稳定性和舒适性是我所使用过的所有版本中最强的。

所以该篇仍先介绍该版本在react中的使用。

---

安装和卸载

// 安装
npm i swiper@5.4.5

// 卸载
npm uninstall swiper
1
2
3
4
5

在组件中引入

这里以DemoSwiper.jsx组件为例。

// swiper@5.4.5
import Swiper from 'swiper/js/swiper.js' // 引入js
import 'swiper/css/swiper.min.css' // 引入样式
1
2
3

完整示例

import React, {useEffect} from 'react'
// swiper@5.4.5
import Swiper from 'swiper/js/swiper.js' // 引入js
import 'swiper/css/swiper.min.css' // 引入样式

const DemoSwiper = () => {
    useEffect(() => {
        // 配置swiper播放 配置项都写这里面
        const mySwiper = new Swiper('.swiper-container', {
            autoplay: true,
            loop: true
        })
    }, [])
    // swiper的html结构
    // 注意！！！：该版本中swiper最外层的类名一定是'swiper-container'，不要用其他的哦
    return <div className='swiper-container' style={{width: '400px', margin: 'auto', textAlign: 'center'}}>
        <div class="swiper-wrapper" style={{color: '#fff'}}>
            <div class="swiper-slide swiper-slide1" style={{backgroundColor: 'blue'}}>Slide 1</div>
            <div class="swiper-slide swiper-slide2" style={{ backgroundColor: 'red' }}>Slide 2</div>
            <div class="swiper-slide swiper-slide3" style={{ backgroundColor: 'yellow', color: '#333' }}>Slide 3</div>
        </div>
    </div>
}

export default DemoSwiper
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

不出意外，此时应该能在页面看到这样的轮播图效果了：

---

react中使用swiper@6.8.4

这个版本已经支持专门的前端框架了，拥有了swiper-vue.js swiper-react.js等文件。

在哪个框架中使用，就从对应的文件中引入即可。

每个文件夹里，有对应的json，用于导入对应的组件。

扯远了，现在就来说说用法。

---

安装和卸载

// 安装
npm i swiper@6.8.4

// 卸载
npm uninstall swiper
1
2
3
4
5

---

引入核心组件和样式

import React from 'react'
// swiper@6.8.4
import { Swiper, SwiperSlide } from 'swiper/react' // 引入js
import 'swiper/swiper.min.css' // 引入样式

const SwiperComp = (props) => {
    return <Swiper
        style={{ width: '400px' }}
        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>
}

export default SwiperComp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

此时，可以看到基本的轮播图结构了。

---

让轮播图跑起来

不得不说，swiper这一点做的是真的不地道，一个非常非常核心的插件，

竟然没有出现在官方文档里，而且，在源码中也没有搜到。

上面那一步完成之后，只能看到完整的轮播图结构，但是轮播图并不会跑起来，

即自动播放和循环播放等。

如果要实现这些功能，需要用到SwiperCore

这个要单独引入和使用，然后加上配置项，才能让轮播图跑起来。

// 封装一个轮播器
import React from 'react'
// swiper@6.8.4
import { Swiper, SwiperSlide } from 'swiper/react' // 引入js
import SwiperCore, { Autoplay } from 'swiper/core' // 引入核心插件和自动播放组件
import 'swiper/swiper.min.css' // 引入样式

SwiperCore.use([Autoplay]) // 使用插件，插件名放入[]中，这一行是重点

const SwiperComp = (props) => {
    return <Swiper
        style={{ width: '400px' }}
        // 在组件标签中进行配置，注意这里的autoplay都是小写的哦
        autoplay
        loop
    >
        <SwiperSlide>Slide 1</SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
}

export default SwiperComp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

此时，在页面中，就可以看到一个跑动起来的轮播图了。

---

配置项说明

正如上面的autoplay, loop等配置项，都是配置在swiper标签里的。

其配置方法，和new Swiper('', { // config...})中的写法一样。

只是，一定要先引入，然后use，即SwiperCore.use([...])

---

下面就介绍一下常用的配置项：

autoplay

用于轮播图自动切换。

如果标签中只写autoplay配置项(在react中也可以写作autoplay={true})，就会按照默认的设置，

即autoplay相当于：

<Swiper
  autoplay={{
	delay: 3000, // 默认延迟3s播放下一张
	stopOnLastSlide: false, // 播放到最后一张时停止：否
	disableOnInteraction: true // 用户操作轮播图后停止 ：是
  }}
>
</Swiper>
1
2
3
4
5
6
7
8

自动切换中，还有一些配置项：

pauseOnMouseEnter：鼠标进入轮播图时停止播放，鼠标离开时继续播放。默认false。开启为true 。

---

loop

用于循环播放

如果只写autoplay，那么当轮播图播放完最后一张时，会从最后一张回到第一张，

而不是播放第一张。

加上loop配置项，就可以让轮播图123123123…这样循环播放下去。

<Swiper
  autoplay
  loop
>
</Swiper>
1
2
3
4
5

---

direction

控制轮播图方向，默认为horizontal，即水平方向。

若要改为上下播放，在react中可以设置为vertical

<Swiper
  autoplay
  loop
  direction='vertical'
>
</Swiper>
1
2
3
4
5
6

---

speed

单张图片从一端滑动到另一端需要的时间，默认为300，单位默认为ms

如需修改，在组件标签中可以进行修改：

<Swiper
  autoplay
  loop
  speed={1000} // 修改为1000ms
>
</Swiper>
1
2
3
4
5
6

---

pagination

用于分页器的配置。分页器的使用，分为三个步骤：

1.需要先引入：

import SwiperCore, { Autoplay, Pagination } from 'swiper/core'
import 'swiper/components/pagination/pagination.min.css'
1
2

2.然后在use中使用：

SwiperCore.use([Autoplay, Pagination])
1

3.在组件标签中添加配置项

<Swiper
  autoplay
  loop
  pagination={{
    clickable: true
  }}
>
</Swiper>
1
2
3
4
5
6
7
8

如需用到更多的配置项，可以查看下面的完整配置项中提供的官方API文档。

---

完整配置项

在vue中使用swiper@5.4.5这篇文章中，介绍了几个常用的配置项，可以作为参考。

这些配置项在所有框架中，都是通用的，配置方法也是完全一致的。

如果要查看完整的配置项，可以进入官网查看：

https://www.swiper.com.cn/api/index.html

---

示例：封装一个简易的轮播器

一般来说，轮播器的每项内容，都是后端传来的数据，

前端获取到这些数据，生成对应的轮播图。

比如datas就是我们从后端获取到的数据，

import React from 'react'
import SwiperComp from './SwiperComp.jsx'

const DemoSwiper = () => {
    const datas = [ // 后端传来的数据
        { id: "001", name: '迪丽热巴', age: 18 },
        { id: "002", name: '小明', age: 14 },
        { id: "003", name: '张三', age: 23 },
        { id: "004", name: '王二狗', age: 19 },
        { id: "005", name: '王境泽', age: 233 },
    ]

    return <div className='report' style={{
        width: '600px',
        height: '30px',
        backgroundColor: 'pink',
        margin: 'auto',
        lineHeight: '30px',
        textAlign: 'center',
        overflow: 'hidden'
    }}>
        {/* 使用轮播器 */}
        <SwiperComp datas={datas}></SwiperComp>
    </div>
}

export default DemoSwiper
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

下面是我们封装好的一个简易的上下滚动的轮播器：

// 封装一个上下滚动的轮播器
import React from 'react'
// swiper@6.8.4
import { Swiper, SwiperSlide } from 'swiper/react' // 引入js
import SwiperCore, { Autoplay, Pagination } from 'swiper/core'
import 'swiper/swiper.min.css' // 引入样式
import 'swiper/components/pagination/pagination.min.css'


SwiperCore.use([Autoplay, Pagination])

const SwiperComp = (props) => {
    const {datas} = props
    return <Swiper
        autoplay
        loop
        direction="vertical"
    >
        {
            datas.map((item, index) => {
                return <SwiperSlide key={item.id}>
                    我是{item.name}，我今年{item.age}岁了~
                </SwiperSlide>
            })
        }
    </Swiper>
}

export default SwiperComp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

得到的效果是：

---

以上就是swiper的5.4.5和6.8.4两个版本在react中的使用方法。