1 Next.js でカルーセル 2 背景 スライドの各ページをバナー画像のように表示したい。 3 カルーセル用ライブラリーの利用 カルーセル処理を実装するのは難易度が高いので、以下のライブラリーの機能を確認し利用させていただくことにした。 react-material-ui-carousel react-responsive-carousel react-carousel react-slick 4 主な確認項目 以下の項目について確認(計画的に試したわけではなく、mardock で実際に使ってみて軽くメモしていた程度)。 Next.js 対応 画像以外への対応 登録項目の扱い(Document ツリー上でどのように扱われるのか) スワイプ、キーボード対応 コントロール(インジケーター等)の表示 5 確認してみた 6 react-material-ui-carousel react-material-ui-carousel - npm React Material UI Carousel Demo 7 メモ Next.js で利用する場合は少し対応が必要 Need transpile in Nextjs or other projects · Issue #2 · Learus/react-material-ui-carousel · GitHub 画像以外も意識した作り 各項目(要素)は表示時だけ Document ツリーに追加される スワイプ対応だが指で弾くように操作、キーボードには未対応 ループさせた場合に少し不自然な切り替え表示 インジケーターは要素とは別領域、前後ボタンは要素に重ねて表示 8 所感 シンプルな構成だが必要な機能は搭載されている。名称にもあるように Material UI 環境で使っても違和感が少ない。スタイル設定は外部 CSS 等を必要としない。前後ボタンの表示方法等も調整できる(その代わりにバージョンで挙動に差異あり)。 スワイプ操作時に前後項目とのドラッグ表示は行われないが、指で弾くようなページ送りは比較的軽快に行われる。 9 react-responsive-carousel react-responsive-carousel - npm http://react-responsive-carousel.js.org/ 10 メモ Next.js でも利用可能 画像を意識した作り(設定で画像以外にも対応) 登録した項目(要素)はセンタリングされる 各項目(要素)はリスト(ul li ) で常に Document ツリーに存在 スワイプ、キーボードにも対応 スワイプ時にページ間の隙間あり(消す方法は不明) インジケーター、前後ボタンどちらも要素に重ねて表示 表示位置変更については確認していない 11 所感 一通りそろった高機能な構成。縦スクロール対応等もある。Material UI 環境で使うと若干の違和感あり、カスタマイズする場合は外部 CSS とのすり合わせが必要。 12 react-carousel @brainhubeu/react-carousel - npm React-carousel 13 メモ Next.js では利用できなかった(window が前提のもよう) README に SSR 未対応が明記されている Next.js を推奨しているが動的ロードが前提 基本的なコンポーネントを組み合わせる構成(インジケーター等も個別コンポーネント) プラグインでの拡張を意識した作り 14 所感 Next.js 未対応だったので詳細な利用はしていない。 15 react-slick react-slick - npm React Slick Documentation 16 メモ Next.js でも利用可能 画像以外も意識した作り デフォルトテーマでは img が block 指定される 各項目(要素)は div の階層として常に Document ツリーに存在 スワイプ、キーボードにも対応 インジケーター、前後ボタンどちらも要素外に表示 テーマを編集することで位置の変更は可能 デフォルトで提示されているテーマは slick-carousel から各種ファイルをコピーする必要がある 17 一通りそろった高機能な構成。縦スクロール、rtl 対応等もある。スタイルは編集することが前提なので(外部 CSS はテーマが分離されている)、Material UI 環境でも自然な表示にできる。環境によってスワイプ時のページ間に隙間あり(消す方法は不明)。 スワイプ操作の反応が若干良くないように感じた(使い方の問題の可能性もある)。 なお、他の用途でも使う可能性がありそうだったので、外部 CSS(テーマ)は jss 化した。詳細は「付録」ページを参照。 18 今回は 19 react-material-ui-carousel を利用 「スワイプ時のドラッグ表示」「自然なループ表示」を理由に react-slick へ傾きかけたが、以下が決め手となり react-material-ui-carousel を利用することとした。 デザインと機能、応答性のバランス とくに「ページ送りの操作が軽い」部分が効いている 20 付録 react-slick を試したときに Next.js + Material UI で扱いやすように作成したコンポーネント(現在は未使用なので検証はあまりしていない)。 スタイルを大雑把に jss 化(.css を扱うのは面倒だったので) img の block 指定は削除(marp の絵文字が崩れる) Arrow ボタンを Material Icon 化 その他(詳細はソースファイルのコメントを参照) https://github.com/hankei6km/mardock/blob/804715df04d8e3d9ec372bffbb998f0c3eab2fe1/components/PageSwitcher.tsx
