カルーセルかスクロールメニューか？正直な比較
Swiper、Embla、keen-slider、react-slick はカルーセルエンジンです。スライドのセマンティクス、スナップ物理、エフェクトを得るために JavaScript でスクロールを再実装しています。react-horizontal-scrolling-menu はそのいずれでもありません。ブラウザネイティブのスクロールに乗り、項目ごとの可視性追跡を加えます。どちらが欲しいかは何を作るか次第です。そしてカルーセル用途のかなりの割合については、正直な答えは「あなたは最初からメニューを作っていた」です。
| このライブラリ | Swiper | Embla | keen-slider | react-slick | |
|---|---|---|---|---|---|
| それは何か | 可視性追跡付きのスクロールメニュー | フル機能のスライダー/カルーセルフレームワーク | ヘッドレスカルーセルエンジン | フレームワーク非依存のスライダーエンジン | jQuery の slick スライダーの React 移植 |
| スクロールエンジン | ブラウザネイティブのスクロール | JS トランスフォーム + 物理 | JS トランスフォーム + 物理 | JS トランスフォーム + 物理 | JS トランスフォーム（CSS トランジション） |
| バンドル（コア、min+gzip） | ≈5.7 kB | ≈40 kB | ≈8 kB | ≈7 kB | ≈15 kB + slick CSS |
| 画面上の項目がどれか | 内蔵——項目ごとの useIsVisible | スライドインデックスベース | スライドインデックスイベント | スライドインデックスイベント | スライドインデックスベース |
| スナップ、エフェクト、物理 | なし——意図的に | 豊富（fade、cube、coverflow…） | プラグインベース、トゥイーン可能 | あり（フリーモード含む） | Fade、センターモード |
| ループ / 自動再生 | 公開 API 上のレシピ | 内蔵プロパティ | プラグイン | 内蔵オプション | 内蔵プロパティ |
| スクロールバー、ホイール、キーボードフォーカス | ネイティブ——ブラウザから無料で | エミュレート / オプトインモジュール | 自作（ヘッドレス） | 自作 | 限定的 |
| 最適な用途 | カテゴリー行、タブストリップ、チップフィルター | 全画面スライダー、ギャラリー | カスタムカルーセル（shadcn のデフォルト） | 最小限のカスタムスライダー | 旧 slick からの移行 |
バンドルサイズは概算のコアサイズです。サイズだけで決める前に、最新の数値は bundlephobia で確認してください。
まず、本当の問い
カルーセルはスライドを提示します。一度に 1 つ（または 1 ページ分）のものを、スナップ、エフェクト、そして「8 枚中 3 枚目」という位置感覚とともに見せます。メニューは、ユーザーが走査して選ぶ 1 行を提示します。カテゴリーレール、タブストリップ、チップバーです。カルーセルはスライドのセマンティクスを欲しがり、メニューはネイティブスクロールを欲しがります——慣性、スクロールバー、ホイール、タッチ、キーボードフォーカスがページの残り部分とまったく同じように振る舞うこと、そしてブラウザが与えてくれない 1 つ——どの項目が画面上にあるかの把握を加えたものです。
全画面画像スライダー、ヒーローギャラリー、あるいはスナップトゥスライドの物理を伴う何かを作るなら、カルーセルライブラリを使ってください——Embla か Swiper が優れています。このページはもう一方のケース、つまりどのカルーセル FAQ も静かに無視しているケースのためにあります。本当はスライドではなかった、クリック可能なものの行です。
vs Swiper
Swiper は現存する中で最も完成度の高いスライダーフレームワークです。エフェクト（fade、cube、coverflow）、仮想スライド、ズーム、パララックス、ページネーション、そして成熟したエコシステム。提供される機能を使うなら、その約 40 kB は元が取れます。トランスフォームでスクロールを再実装しているため、ネイティブのスクロールバー、ホイールの挙動、スクロールのアクセシビリティは、継承されるデフォルトではなく、あなたが設定するエミュレーションになります。
- Swiper を選ぶのは、画像中心のスライダー、エフェクト、スライドらしく感じさせる必要があるもの。
- このライブラリを選ぶのは、その「カルーセル」が YouTube 風のチップバーや Netflix 風のカテゴリー行であるとき。約 34 kB 少なくネイティブスクロールが得られ、さらに項目ごとの
useIsVisibleがあります——Swiper はスライドが項目ではないため、これをモデル化しません。
vs Embla
Embla は美しい物理と第一級の React アダプターを備えたヘッドレスカルーセルエンジンです。shadcn/ui がカルーセルを構築している土台であり、本物のカルーセルを完全に視覚的に制御したいときの正しいデフォルトです。ヘッドレスであることはメニューにとって両刃です。選択時のスクロールイン、項目ごとの可視性、矢印の無効化、フォーカス管理は、すべて自分で組み立てることになります。
- Embla を選ぶのは、カスタムデザインのカルーセルと、小サイズのスナップ物理。
- このライブラリを選ぶのは、その自作部分こそが要点であるとき。
scrollToItem、useIsVisible、first/last の矢印状態、apiRefが動作済みで同梱されています。
vs keen-slider
keen-slider は軽量でフレームワーク非依存のスライダーエンジンです。フレームワークをまたいで 1 つの依存で済ませたいときの、最小限のカスタムスライダーとして良い選択です。他のライブラリと同様、トランスフォームでジェスチャーレイヤーを自前で持ち、API はスライドインデックスを中心に設計されています。スライドには向いていますが、「選択したチップをスクロールして表示し、何が見えているかを教えて」には不格好です。
vs react-slick
react-slick は jQuery 時代の slick カルーセルを React に移植したものです。今でも動きますが、別の CSS ファイルを引き込み、アーキテクチャは hooks より前のもので、メンテナンスもまばらです。離脱するチームはおおむね 2 つの陣営に分かれます。本物のカルーセル（Embla か Swiper へ）と、slick が既に入っていたために centerMode に曲げられてしまったナビゲーション行です。後者の陣営こそがこのライブラリのまさに形です。中央揃えの選択、1 項目ずつの送り、ドラッグでスクロール を、スライダーエンジンなしで。
メニュー側はどんな見た目か
このサイトのすべてのパターンはライブでサーバーレンダリングされ、それぞれ完全なソースが付属します。スクロール可能なタブ、フィルターチップ、追加読み込みの行、そして——カルーセルエンジンが必要だと思われがちな 2 つの機能——無限ループ と 自動再生 は、それぞれ公開 API 上で約 60 行です。
- min+gzip 5.7 kB、TypeScript ファースト、MIT、月間約 34.7 万ダウンロード、2018 年から保守、React 16.8–19 で 1 つの安定した API。
- SSR フレンドリー：JavaScript がハイドレートする前からこの行はスクロールできます——このページと、このサイトのすべてのデモがその証明です。