使用するもの

環境は Windows 10 です。

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

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

コマンドプロンプトを開き、好きなディレクトリへ移動
```
$ cd C:\React
```
最新の Node.js がインストールされていることを確かめる。
Create React App のインストールガイドに従って新しいプロジェクトを作成する。
```
$ npx create-react-app swiper-sample
```
新しく作ったプロジェクトの src/ 内にあるファイルをすべて削除する
```
$ cd swiper-sample
$ del *
```
index.js を作成
```
$ type nul > index.js
```
新しく作ったプロジェクトのルートへ戻る
```
$ cd ../
```

Swiper (react-id-swiper) 導入

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

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

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

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')
);

npm start
```
$ npm start
```

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

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

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 をご覧ください。

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 より取得可能