react中swiper插件如何使用

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

方法：1、使用“npm i swiper -S”命令安裝swiper包；2、使用import語句引入swiper的css和js文件；3、在render中編寫swiper組件的結(jié)構(gòu)，并在react的掛載生命周期函數(shù)內(nèi)創(chuàng)建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聲明周期里創(chuàng)建Swiper對象進(jìn)行調(diào)用

// 直接引用數(shù)據(jù)將，new Swiper放在componentDidMount
// 用axios請求數(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)容，歡迎來億速云行業(yè)資訊！