方法：1、使用“npm i swiper -s”命令安装swiper包；2、使用import语句引入swiper的css和js文件；3、在render中编写swiper组件的结构，并在react的挂载生命周期函数内创建swiper对象即可。
本教程操作环境：windows7系统、react16版，该方法适用于所有品牌电脑。
react中使用基本swiper
第一步：安装包
npm i swiper -s
第二步：引包
import swiper from 'swiper/dist/js/swiper.js'  import 'swiper/dist/css/swiper.css'
第三步：写html
    <!-- slider main container -->    <p class="swiper-container">        <!-- additional required wrapper -->        <p class="swiper-wrapper">            <!-- slides -->            <p class="swiper-slide">slide 1</p>            <p class="swiper-slide">slide 2</p>            <p class="swiper-slide">slide 3</p>        </p>        <!-- if we need pagination -->        <p class="swiper-pagination"></p>        <!-- if we need navigation buttons -->        <p class="swiper-button-prev"></p>        <p class="swiper-button-next"></p>        <!-- if we need scrollbar -->        <p class="swiper-scrollbar"></p>    </p>
第四步：在react声明周期里创建swiper对象进行调用
// 直接引用数据将，new swiper放在componentdidmount// 用axios请求数据，new swiper放在componentdidupdate      new swiper('.swiper-container', {        direction: 'vertical',//竖向轮播        loop: true,//无缝轮播        pagination: {//小圆点分页            el: '.swiper-pagination',        },        navigation: {//左右分页            nextel: '.swiper-button-next',            prevel: '.swiper-button-prev',        },        scrollbar: {//下划线分页            el: '.swiper-scrollbar',        }    })
更多编程相关知识，请访问：编程入门！！
以上就是react中swiper插件如何使用？的详细内容。