React で Swiper プラグインを使用するにはどうすればよいですか?

方法: 1. "npm i swiper -S" コマンドを使用して swiper パッケージをインストールします; 2. import ステートメントを使用して swiper の css および js ファイルを導入します; 3. swiper コンポーネントの構造をレンダリングして反応に追加します。マウントライフサイクル関数内で Swiper オブジェクトを作成するだけです。

このチュートリアルの動作環境: Windows7 システム、react16 バージョン この方法は、すべてのブランドのコンピューターに適しています。

#react での基本的なスワイパーの使用

ステップ 1: パッケージをインストールする

npm i swiper -S

ステップ 2: パッケージを導入する

import Swiper from 'swiper/dist/js/swiper.js'  
import 'swiper/dist/css/swiper.css'

ステップ 3: 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 中国語 Web サイトの他の関連記事を参照してください。