react中swiper插件如何使用？

方法：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插件如何使用？的详细内容，更多内容请关注技术你好其它相关文章！