Reactを使ってスライドショーを作るには？

私は、react-swipeable-viewsを使ってみました。
react-swipeable-views ←公式？サイトです。

インストール

npm install --save react-swipeable-views
以下の3つのパッケージがインストールされる様です。

react-swipeable-views
react-swipeable-views-native
react-swipeable-views-utils

スワイプするスライドショーを作る

公式のデモコードをパクって説明させていただきます。
スタイルは消しました。（テキトーに背景色でも入れてください）

import React from 'react';
import SwipeableViews from 'react-swipeable-views';

function DemoSimple() {
  return (
    // ここでスライドが作られる
    <SwipeableViews enableMouseEvents>
      <div>slide n°1</div>
      <div>slide n°2</div>
      <div>slide n°3</div>
    </SwipeableViews>
  );
}

export default DemoSimple;

react-swipeable-viewsを呼び出して、
react-swipeable-viewsのタグ(SwipeableViewsタグ)の子要素にスライドさせたい要素を入れるだけです。
これだけで手動のスライドが作れます。

自動でスライドさせるには？

以下のコメントの部分を書き換えると自動的にスライドします。

import React from 'react';
import SwipeableViews from 'react-swipeable-views';
// ↓追加
import { autoPlay } from 'react-swipeable-views-utils';

// ↓ここで自動的にスライドするようにする
const EnhancedSwipeableViews = autoPlay(SwipeableViews);

function DemoSimple() {
  return (
    // ↓ここも忘れずに変更する
    <EnhancedSwipeableViews enableMouseEvents>
      <div>slide n°1</div>
      <div>slide n°2</div>
      <div>slide n°3</div>
    </EnhancedSwipeableViews>
  );
}

export default DemoSimple;

しかし、これだと時間が設定できません。

autoPlayのスライドする時間を設定するには？

<EnhancedSwipeableViews enableMouseEvents>部分にinterval属性を追加します。
例:
<EnhancedSwipeableViews enableMouseEvents interval={2000}>
こんな感じで設定すると2秒置きにスライドするようになります。

デフォルトでは、interval={3000}になっているみたいです。

やっていて困ったこと

公式のデモを見ていたら自動でスライドは出来ているけど、スワイプでスライドが出来ませんでした。
原因は属性にenableMouseEventsが無かったからなんですが、一瞬,autoPlayはそういうものなのかと思って使用を諦めるところでした。
なので、スワイプも自動でスライドもしたいって方はautoPlayとenableMouseEventsを忘れずに！！

Reactを使って自動でスライドされるスライドショーを作る