这篇文章主要介绍了react中swiper插件如何使用，具有一定借鉴价值，需要的朋友可以参考下。下面就和我一起来看看吧。
方法：1、使用“npm i swiper -S”命令安装swiper包；2、使用import语句引入swiper的css和js文件；3、在render中编写swiper组件的结构，并在react的挂载生命周期函数内创建Swiper对象即可。
该方法适用于所有品牌的电脑。
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插件如何使用的详细内容了，看完之后是否有所收获呢？如果想了解更多相关内容，欢迎来亿速云行业资讯！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
