react 使用 swiper

1. 下载

• yarn add swiper

因为下载的 swiper 里面有 sass 文件，你需要 安装 sass 模块，不至于报错

• yarn add node-sass

2. 引用文件

import React, { Component } from 'react'
import "swiper/swiper.scss"   //⬅⬅⬅⬅⬅
import Swiper from 'swiper'   //⬅⬅⬅⬅⬅

3. 使用（还有一步，请继续）

• 从官网直接复制即可 ------ -swiper官网
• 注意：因为是 jsx 文件，所以你要把class 换成 className
  

4. 实例化 swiper

    componentDidMount(){   //在这里书写
        new Swiper(".swiper-container",{
            loop:true,
            pagination:{
                el:".swiper-pagination"
            }
        })
    }

介绍：

代码展示：

import React, { Component } from 'react'
// import "swiper/swiper.scss"
import "swiper/css/swiper.min.css"

import "./index.scss"
import Swiper from 'swiper'  
export default class index extends Component {
    componentDidMount(){  
        new Swiper(".swiper-container",{
            loop:true,
            pagination:{
                el:".swiper-pagination"
            }
        })
    }
    render() {
        return (
            <div className="swiper-container">
                <div className="swiper-wrapper">
                    <div className="swiper-slide">Slide 1</div>
                    <div className="swiper-slide">Slide 2</div>
                    <div className="swiper-slide">Slide 3</div>
                </div>
                <div className="swiper-pagination"></div>
            </div>
        )
    }
}