reelkitReelKit

はじめに

reelkit は 一度に 1 つのアイテムだけを表示するスライダー です。TikTok、Instagram Reels、Stories のように、画面には常に 1 つのアイテムが表示されます。縦型の動画フィード、フルスクリーンのギャラリー、スワイプで切り替えるコンテンツに最適です。

ReelKit を気に入っていただけましたか？

ReelKit が役に立ったら、GitHub でスターを付けていただけるとうれしいです。ほかの開発者がプロジェクトを見つけやすくなり、開発を続ける力になります。応援していただき、心から感謝しています！

0.x.x — Unstable API

ReelKit は活発に開発中です。バージョンが 0.x.x のあいだは、非推奨期間を設けずにマイナーバージョン間で API が変わることがあります。予期しない破損を避けるため、バージョンを固定してください。

フレームワークを選ぶ

オンラインで試す

インストール不要で、ブラウザーからそのまま試せます：

クイックスタート

React で作る最小限の縦型スライダー：

tsx

クイックスタート

Angular で作る最小限の縦型スライダー：

typescript

クイックスタート

Vue で作る最小限の縦型スライダー：

vue

主な概念

Reel

Reel コンポーネントはメインのコンテナーです。スライダーの状態を管理し、タッチジェスチャー、キーボード操作、アニメーションを処理します。スライドの描画には itemBuilder によるレンダープロップパターンを使います。

itemBuilder

itemBuilder プロップは、インデックスを受け取って各スライドの内容を返す関数です。このパターンによって仮想化が可能になり、表示中のアイテムだけが描画されます。

ReelIndicator

スライダー内の現在位置を示す、Instagram 風の進捗インジケーターを表示する任意のコンポーネントです。

tsx
html
vue-html

組み込みの操作方法：

  • タッチ／スワイプ： ドラッグで移動し、慣性とスナップが効きます
  • キーボード： 矢印キー（オーバーレイ系のコンポーネントは Escape でも閉じます）
  • マウスホイール： enableWheel プロップで有効にします
  • プログラムから： apiRef で next()、prev()、goTo() を呼びます
tsx
html
vue

次のステップ