React で Swiper 使ってみた (react-id-swier)

使用するもの

• React
• Node.js
• react-id-swiper

環境は Windows 10 です。

React 環境の構築（不要だと思うので読み飛ばしてください。）

下記を参考にサンプルプロジェクトを作成しています。
https://ja.reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment

1. コマンドプロンプトを開き、好きなディレクトリへ移動

   $ cd C:\React
   

2. 最新の Node.js がインストールされていることを確かめる。

3. Create React App のインストールガイドに従って新しいプロジェクトを作成する。

   $ npx create-react-app swiper-sample
   

4. 新しく作ったプロジェクトの src/ 内にあるファイルをすべて削除する

   $ cd swiper-sample
   $ del *
   

5. index.js を作成

   $ type nul > index.js
   

6. 新しく作ったプロジェクトのルートへ戻る

   $ cd ../
   

Swiper (react-id-swiper) 導入

react-id-swiper は Swiper と全く別の人が開発しているものですが、React で簡単に Swiper が導入できたので、今回はそれを使います。

1. react-id-swier をインストール

   $ npm install --save react-id-swiper@latest swiper@latest
   

2. index.js にサンプルコードを記述

   index.js

   import React from 'react';
   import ReactDOM from 'react-dom';
   import Swiper from 'react-id-swiper';
   
   class SimpleSwiper extends React.Component {
   
     render() {
       return(
         <Swiper>
           <div>Slide 1</div>
           <div>Slide 2</div>
           <div>Slide 3</div>
           <div>Slide 4</div>
           <div>Slide 5</div>
         </Swiper>
       )
     };
   }
   
   ReactDOM.render(
     <SimpleSwiper />,
     document.getElementById('root')
   );
   

3. npm start

   $ npm start
   

react-id-swiper にパラメータをセット

swiper の pagenation と navigation を設定してみます。
設定できるパラメータは こちら を参照ください。

1. index.js にサンプルコードを記述

   index.js

   import React from 'react';
   import ReactDOM from 'react-dom';
   import Swiper from 'react-id-swiper';
   
   class SimpleSwiper extends React.Component {
     constructor(props) {
       super(props)
       this.state = {
         params: {
           pagination: {
             el: '.swiper-pagination',
             type: 'bullets',
             clickable: true
           },
           navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev'
           },
           spaceBetween: 30
         }
       }
     }
   
     render() {
       return(
         <Swiper {...this.state.params}>
           <div>Slide 1</div>
           <div>Slide 2</div>
           <div>Slide 3</div>
           <div>Slide 4</div>
           <div>Slide 6</div>
         </Swiper>
       )
     };
   }
   
   ReactDOM.render(
     <SimpleSwiper />,
     document.getElementById('root')
   );
   

swiper インスタンスを取得しイベントを登録してみる

ここでの swiper インスタンスは、皆さんご存知の swiper のはず。（おい
詳細なバージョンは node_module/swiper/package.json をご覧ください。

1. index.js にサンプルコードを記述

   index.js

   import React from 'react';
   import ReactDOM from 'react-dom';
   import Swiper from 'react-id-swiper';
   
   class SimpleSwiper extends React.Component {
     constructor(props) {
       super(props)
       this.state = {
         params: {
           pagination: {
             el: '.swiper-pagination',
             type: 'bullets',
             clickable: true
           },
           navigation: {
             nextEl: '.swiper-button-next',
             prevEl: '.swiper-button-prev'
           },
           spaceBetween: 30,
           getSwiper: (swiper) => { /** ----- ここを追加 ----- */
             swiper.on('slideChange', () => {
               console.log(`slide changed : ${swiper.activeIndex}`);
             })
           }
         }
       }
     }
   
     render() {
       return(
         <Swiper {...this.state.params}>
           <div>Slide 1</div>
           <div>Slide 2</div>
           <div>Slide 3</div>
           <div>Slide 4</div>
           <div>Slide 6</div>
         </Swiper>
       )
     };
   }
   
   ReactDOM.render(
     <SimpleSwiper />,
     document.getElementById('root')
   );
   

   開発者ツールでコンソールログを確認すると、出力されていますね！

まとめ

• React で Swiper を実装するときは react-id-swiper が楽
• react-id-swiper でもいくつかパラメータは設定可能
• swiper のインスタンスは getSwiper より取得可能