react中swiper插件如何使用
这篇文章主要介绍了react中swiper插件如何使用,具有一定借鉴价值,需要的朋友可以参考下。下面就和我一起来看看吧。
创新互联是一家业务范围包括IDC托管业务,雅安服务器托管、主机租用、主机托管,四川、重庆、广东电信服务器租用,达州服务器托管,成都网通服务器托管,成都服务器租用,业务范围遍及中国大陆、港澳台以及欧美等多个国家及地区的互联网数据服务公司。
方法: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
Slide 1
Slide 2
Slide 3
第四步:在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插件如何使用的详细内容了,看完之后是否有所收获呢?如果想了解更多相关内容,欢迎来创新互联行业资讯!
网站题目:react中swiper插件如何使用
本文链接:http://scyanting.com/article/jehhjh.html