react 使用 swiper轮播图_react swiper轮播图

swiper在react中的使用

1. npm下载插件

   npm i swiper --save
   现在默认最新版本 是 “6.0.4”
   这个版本在引入css样式的时候和之前版本引入路径不同：
   之前版本：import “swiper/css/swiper.css”
   现在版本：import ‘swiper/swiper-bundle.min.css’
   如果有多个轮播图最好写到组件里面

2. 写在render中的结构，类名都是swiper引入的css样式

  render () {
    return (
      <>
        <div className="swiper-container">
          <div className="swiper-wrapper">
            <div className="swiper-slide ">slider1</div>
            <div className="swiper-slide ">slider2</div>
            <div className="swiper-slide ">slider3</div>
          </div>
        </div>
      </>
    );
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

3. 定义轮播图的属性。

	componentDidMount () {
    //可以加上你需要的条件等，然后生成Swiper对象，
    //一定要检查是不是每次都生成了Swiper对象，否则可能出现不滑动的情况和别的情况等
    new Swiper('.swiper-container', {
      loop: true, // 循环模式选项
      autoplay: true, //自定轮播
    })
  }
  //更多属性见官网API文档
  // https://www.swiper.com.cn/api/start/new.html
1
2
3
4
5
6
7
8
9
10

以上三步就实现了一个最基本的轮播图
喜欢交朋友的可以互相关注一下 ~~