react中swiper4.x轮播图的使用

找了好久，文档都比较混乱，自己总结一份 如下

安装

npm install --save swiper

引入文件

import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.min.css'

html内容

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

初始化swiper

new Swiper ('.swiper-container', {
    loop: true,  //循环
    autoplay: {   //滑动后继续播放（不写官方默认暂停）
        disableOnInteraction: false,
    },
    pagination: {  //分页器
        el: '.swiper-pagination'
    }
})

更多的参数配置 可看官方api https://www.swiper.com.cn/api/index.html