背景

スライドの各ページをバナー画像のように表示したい。

カルーセル用ライブラリーの利用

カルーセル処理を実装するのは難易度が高いので、以下のライブラリーの機能を確認し利用させていただくことにした。

• react-material-ui-carousel
• react-responsive-carousel
• react-carousel
• react-slick

主な確認項目

以下の項目について確認(計画的に試したわけではなく、mardock で実際に使ってみて軽くメモしていた程度)。

• Next.js 対応
• 画像以外への対応
• 登録項目の扱い(Document ツリー上でどのように扱われるのか)
• スワイプ、キーボード対応
• コントロール(インジケーター等)の表示

react-material-ui-carousel

• react-material-ui-carousel - npm
• React Material UI Carousel Demo

メモ

• Next.js で利用する場合は少し対応が必要

  • Need transpile in Nextjs or other projects · Issue #2 · Learus/react-material-ui-carousel · GitHub

• 画像以外も意識した作り

• 各項目(要素)は表示時だけ Document ツリーに追加される

• スワイプ対応だが指で弾くように操作、キーボードには未対応

  • ループさせた場合に少し不自然な切り替え表示

• インジケーターは要素とは別領域、前後ボタンは要素に重ねて表示

所感

シンプルな構成だが必要な機能は搭載されている。名称にもあるように Material UI 環境で使っても違和感が少ない。スタイル設定は外部 CSS 等を必要としない。前後ボタンの表示方法等も調整できる(その代わりにバージョンで挙動に差異あり)。

スワイプ操作時に前後項目とのドラッグ表示は行われないが、指で弾くようなページ送りは比較的軽快に行われる。

react-responsive-carousel

• react-responsive-carousel - npm
• http://react-responsive-carousel.js.org/

メモ

• Next.js でも利用可能

• 画像を意識した作り(設定で画像以外にも対応)

  • 登録した項目(要素)はセンタリングされる

• 各項目(要素)はリスト(ul li ) で常に Document ツリーに存在

• スワイプ、キーボードにも対応

  • スワイプ時にページ間の隙間あり(消す方法は不明)

• インジケーター、前後ボタンどちらも要素に重ねて表示

  • 表示位置変更については確認していない

所感

一通りそろった高機能な構成。縦スクロール対応等もある。Material UI 環境で使うと若干の違和感あり、カスタマイズする場合は外部 CSS とのすり合わせが必要。

react-carousel

• @brainhubeu/react-carousel - npm
• React-carousel

メモ

• Next.js では利用できなかった(window が前提のもよう)

  • README に SSR 未対応が明記されている
  • Next.js を推奨しているが動的ロードが前提

• 基本的なコンポーネントを組み合わせる構成(インジケーター等も個別コンポーネント)

• プラグインでの拡張を意識した作り

所感

Next.js 未対応だったので詳細な利用はしていない。

react-slick

• react-slick - npm
• React Slick Documentation

メモ

• Next.js でも利用可能

• 画像以外も意識した作り

  • デフォルトテーマでは img が block 指定される

• 各項目(要素)は div の階層として常に Document ツリーに存在

• スワイプ、キーボードにも対応

• インジケーター、前後ボタンどちらも要素外に表示

  • テーマを編集することで位置の変更は可能

• デフォルトで提示されているテーマは slick-carousel から各種ファイルをコピーする必要がある

一通りそろった高機能な構成。縦スクロール、rtl 対応等もある。スタイルは編集することが前提なので(外部 CSS はテーマが分離されている)、Material UI 環境でも自然な表示にできる。環境によってスワイプ時のページ間に隙間あり(消す方法は不明)。

スワイプ操作の反応が若干良くないように感じた(使い方の問題の可能性もある)。

なお、他の用途でも使う可能性がありそうだったので、外部 CSS(テーマ)は jss 化した。詳細は「付録」ページを参照。

react-material-ui-carousel を利用

「スワイプ時のドラッグ表示」「自然なループ表示」を理由に react-slick へ傾きかけたが、以下が決め手となり react-material-ui-carousel を利用することとした。

• デザインと機能、応答性のバランス

  • とくに「ページ送りの操作が軽い」部分が効いている

付録

react-slick を試したときに Next.js + Material UI で扱いやすように作成したコンポーネント(現在は未使用なので検証はあまりしていない)。

• スタイルを大雑把に jss 化(.css を扱うのは面倒だったので)
• img の block 指定は削除(marp の絵文字が崩れる)
• Arrow ボタンを Material Icon 化
• その他(詳細はソースファイルのコメントを参照)

https://github.com/hankei6km/mardock/blob/804715df04d8e3d9ec372bffbb998f0c3eab2fe1/components/PageSwitcher.tsx