react中swiper插件如何使用-创新互联

这篇文章主要介绍了react中swiper插件如何使用，具有一定借鉴价值，需要的朋友可以参考下。下面就和我一起来看看吧。

成都创新互联成立于2013年，是专业互联网技术服务公司，拥有项目成都网站设计、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元玛曲做网站,已为上家服务,为玛曲各地企业和个人服务,联系电话:028-86922220

方法：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://6mz.cn/article/hdhid.html