使用cnpm或者npm 在控制台输入

npm view swiper versions  

swiperversions.png

目前6.XX版本与react还没优化完毕 暂时不用6.XX版本
可以输入如下命令使用5.XX版本

yarn add swiper@5.2.0 -S

装完去package.json里面再确认一下 步步确认 才能更扎实

首先在index.js 中引入全局样式

//引入swiper的全局样式
import "swiper/css/swiper.min.css"

• 引入swiper
• 将swiper实例化
• 写出基本结构
  同样，class要写成className
  最外面的一层是 'swiper-container'
  下一层是'swiper-wrapper'
  再一层滚动层是'swiper-slide'
  以下为react操作 同样用不同的钩子函数可以在vue里面进行操作

 componentDidMount(){
        //进行Swiper的实例化操作
        new Swiper(".swiper-container",{
            loop:true
        })
    }
    
    render() {
        return (
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    <div className="swiper-slide">111</div>
                    <div className="swiper-slide">222</div>
                    <div className="swiper-slide">333</div>
                </div>
            </div>
        )
    }

如果是异步获取轮播图数据 有一点要注意：

异步请求不会阻塞后续实例化的过程，它会边进行异步的时候边去实例化操作。
必须要保证页面中已经出现了swiper-slide真实dom元素后，再去进行swiper的实例化操作才可以。

解决办法一：

1.在componentDidMount里面进行异步请求
2.在componentDidUpdate里面进行swiper的实例化操作
也就是

 componentDidUpdate(){  
    // 利用DidUpdate的特性 在最后进行swiper的实例化操作
    new Swiper(".swiper-container",{
      loop:true
    })
  }

解决方法二：

这个是已经自定义封装好一个swiper组件了 要引入这个组件的情况
1.同样还是在componentDidMount里面进行异步请求
2.在 渲染 render() swiper自定义组件的时候 做一个判断先不让他去调用组件
当获取数据的列表获取到数据的时候再给它放行 让它去加载自定义swiper组件
也就是：

render(){
    return (
      <div>
        {
          this.state.list.length > 0 ? <SwiperComp cName='swp1' list={this.state.list}/> : null
        }
  <hr/>
        {
          this.state.list.length > 0 ? <SwiperComp cName="swp2" list={this.state.list}/> : null
        }
      </div>
    )
  }

这里有一点需要注意：如果使用下面的小圆点"swiper-pagination"并且同一个模块要使用两次以上的swiper 一定要有属性名进行区分 这里是cName 最后可以拼接成类名
否则会出现轮播图可以手动滑动 但是小圆点不动的情况
出现这种情况的原因是因为同一个类名实例化多次。
这个是自定义封装swiper组件内的render

 render() {
    return (
      <div className={"swiper-container "+ this.props.cName}>
        <div className="swiper-wrapper">
          {
            this.props.list.map(item=>{
              return (
                <div key={item.filmId} className="swiper-slide">
                  <img src={item.poster}/>
                </div>
              )
            })
          }
        </div>
        <div className="swiper-pagination"></div>  
      </div>
    )
  }

以下贴一个半成品的 自定义封装 swiper组件的代码

import React, { Component } from 'react'
import Swiper from "swiper"
export default class SwiperComp extends Component {

  componentDidMount(){
    new Swiper("."+ this.props.cName,{
      loop:true,
      pagination:{
        el:".swiper-pagination"
      }
    })
  }


  render() {
    return (
      <div className={"swiper-container "+ this.props.cName}>
        <div className="swiper-wrapper">
          {
            this.props.list.map(item=>{
              return (
                <div key={item.filmId} className="swiper-slide">
                  <img src={item.poster}/>
                </div>
              )
            })
          }
        </div>
        <div className="swiper-pagination"></div>  
      </div>
    )
  }
}