react中swiper插件如何使用？

方法：1、使用「npm i swiper -S」指令安裝swiper套件；2、使用import語句引入swiper的css和js檔案；3、在render中編寫swiper元件的結構，並在react的掛載生命週期函數內建立Swiper物件即可。

本教學操作環境：windows7系統、react16版，此方法適用於所有品牌電腦。

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>

第4步：在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插件如何使用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！