99热在线精品一区二区三区_国产伦精品一区二区三区女破破_亚洲一区二区三区无码_精品国产欧美日韩另类一区

這篇文章主要介紹了react中swiper插件如何使用，具有一定借鑒價(jià)值，需要的朋友可以參考下。下面就和我一起來看看吧。

成都創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元瑪曲做網(wǎng)站,已為上家服務(wù),為瑪曲各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

方法：1、使用“npm i swiper -S”命令安裝swiper包；2、使用import語句引入swiper的css和js文件；3、在render中編寫swiper組件的結(jié)構(gòu)，并在react的掛載生命周期函數(shù)內(nèi)創(chuàng)建Swiper對(duì)象即可。

• 該方法適用于所有品牌的電腦。

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聲明周期里創(chuàng)建Swiper對(duì)象進(jìn)行調(diào)用

// 直接引用數(shù)據(jù)將，new Swiper放在componentDidMount
// 用axios請(qǐng)求數(shù)據(jù)，new Swiper放在componentDidUpdate  

    new Swiper('.swiper-container', {
        direction: 'vertical',//豎向輪播
        loop: true,//無縫輪播
        pagination: {//小圓點(diǎn)分頁
            el: '.swiper-pagination',
        },
        navigation: {//左右分頁
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        scrollbar: {//下劃線分頁
            el: '.swiper-scrollbar',
        }
    })

以上就是react中swiper插件如何使用的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎來創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，行業(yè)資訊！

分享文章：react中swiper插件如何使用-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://ef60e0e.cn/article/hdhid.html