Splideオプションの選び方：主要16項目を判断軸で整理するガイド

2026.04.16 公開

Splideは機能が豊富なぶん、どのオプションをどの場面で使えばいいか で迷いやすいライブラリです。公式ドキュメントは網羅的ですが、「ヒーロー領域なら何と何を組み合わせるべきか」「カード一覧ではどう変わるか」といった判断軸まではまとまっておらず、毎回設定を試行錯誤することになりがちです。

この記事では、Splideの実装で頻出する主要16項目を 判断軸と用途別の設定例 で整理します。Splideの基本的な使い方（インストール・HTML構造）は Splide.jsの使い方：高機能な国産カルーセルスライダーで扱っているので、そちらを先に読んでから本記事に進むとスムーズです。

扱うオプションは以下の3ブロックです。

Basic — type / perPage / perMove / gap / speed / arrows / pagination / drag / rewind
Autoplay — autoplay / interval / pauseOnHover / pauseOnFocus / resetProgress / progressBar
Responsive & Extension — breakpoints / Auto Scroll拡張

末尾にはユースケース別の設定テンプレ（ヒーロー / カード一覧 / ロゴティッカー）もまとめています。

Basic

`type` — スライドの進み方

最初に決めるのは「スライドがどう進むか」です。

`type`	挙動	向いている用途
`slide`	端で止まる	ページネーションを明示的に見せる、記事内のステップ説明
`loop`	無限にループ	ヒーロースライダー、おすすめ記事、サイクルさせたい見せ物
`fade`	切り替わりがフェード	同じ位置で画像だけ変えたい、ヒーローのビジュアル切り替え

迷ったら slide。ユーザーが「今どこにいるか」を把握しやすく、アクセシビリティ的にも素直です。ヒーロー領域のように連続再生したい場合だけ loop を選びます。

fade は見た目がすっきりしますが、複数枚を同時に見せられない（perPage が実質1固定）ため、使いどころは限られます。

`perPage` — 1画面に何枚見せるか

ビューポートに並ぶスライド数です。

ヒーローなど画像を主役にする: 1
カード一覧・記事一覧: PCは 3 前後
ロゴ一覧・サムネイル: 4〜6

perPage: 1.2 のような小数値を使うと、スマホで「次のスライドが少しだけ見えている」演出になり、スワイプ率が上がります。ただし type: 'loop' との組み合わせで表示ズレが出やすい ので、実機で確認してください。

`perMove` — 1回の操作で進む枚数

迷ったら 1 が無難です。

perPage と同じ値にすると「ページ単位で飛ばす」挙動になりますが、スワイプ操作と相性が悪く、ユーザーの意図より大きく進んでしまうことがあります。ページネーション付きで「カチッ」とページ送りしたい場合だけ大きい値にします。

`gap` — スライド間の余白

単位付き文字列（1rem 16px 1.5em など）で指定します。

カード一覧: 1rem 〜 1.5rem が使いやすい
ヒーロー: 0 で余白なし（1枚表示なら影響なし）
ロゴティッカー: 2rem 以上で間隔を広めに

単位を付けずに数値だけ書くとpx扱いになる場合もありますが、明示的に単位を付けた方がトラブルが少ないです。

`speed` — 切り替わりのアニメーション時間（ms）

標準: 400〜800ms（Splideのデフォルトは 400ms）
ゆっくり見せたい（ヒーロー）: 1000ms 前後
機敏に切り替えたい（UI操作）: 300ms 前後

Auto Scroll拡張を使う場合は、切り替え速度は speed ではなく autoScroll.speed で制御するため、こちらの値は使われません。

`arrows` — 左右の矢印ボタン

場面	設定
PCでマウス操作主体	`true`
SPでスワイプ主体	`false`（`breakpoints` で切り替え）
タッチ主体の埋め込みUI	`false`

矢印を出す場合は、キーボード操作（Tabキー）でもフォーカスが回る順序になっているかを確認してください。

`pagination` — 現在位置を示すドット

ユーザーに「何枚あるか」を見せたい: true
純粋な演出でスライド数を意識させたくない: false（ヒーローなど）

矢印と両方出すのは情報過多になりがちです。SPで arrows: false にする場合は、pagination: true を残しておくと現在位置がわかりやすくなります。

`drag` — マウス/タッチでドラッグ操作

基本は true（ユーザーの期待動作）
false にするのは、ドラッグで誤操作させたくない特殊UIのみ

drag: 'free' にすると慣性スクロールのような挙動になります。慣性が欲しい場合はAuto Scroll拡張の検討も視野に入れます。

`rewind` — 端で逆方向に戻す

type: 'slide' と組み合わせる専用オプション
最後のスライドから「次へ」を押すと最初に戻る
type: 'loop' とは併用しない（ループ自体が端を消すため）

UX的には loop の方が自然な場合が多いですが、ループさせたくないが端で戻したい場合に有効です。

Autoplay

`autoplay` — 一定間隔の自動再生

オンにすると interval の間隔で自動的にスライドが進みます。

ヒーロー / プロモーション領域のように「1枚ずつじっくり見せたい」場合に使います。連続スクロール的な動きにしたい場合はAuto Scroll拡張を選びます（後述）。

`interval` — 自動再生の間隔（ms）

ヒーロー: 5000〜8000（長めに見せる）
お知らせバー・プロモーション: 3000〜5000
速すぎ禁物: 2000 以下は読めず酔う原因

Splideのデフォルトは 3000ms ですが、実際のコンテンツは 5000ms 以上の方が落ち着いて読めることが多いです。

`pauseOnHover` — ホバー時の一時停止

基本は true。ユーザーが読もうとした瞬間に切り替わるのを防ぎます。

false にするのは、常に流し続けることが目的のデザイン（背景アニメ的な使い方）に限定されます。

`pauseOnFocus` — フォーカス時の一時停止

アクセシビリティ観点で true 必須。キーボード操作でフォーカスが当たった時に停止するので、スクリーンリーダーやキーボードユーザーがコンテンツを読める時間を確保できます。

WCAG 2.2.2（一時停止、停止、非表示）の観点からも、5秒以上動き続けるコンテンツには停止手段が必要です。

`resetProgress` — ユーザー操作後に進捗をリセット

ユーザーが矢印やpaginationを操作した際、interval のカウントをリセットするかどうかです。

設定	挙動
`true`	操作直後からフル `interval` 待つ（ユーザー尊重）
`false`	操作しても元のタイマーのまま進む

true の方がユーザー体験は自然ですが、短い interval での自動再生では「いつまでも切り替わらない」感が出ることもあります。interval: 3000 以下なら false、それ以上なら true を基本に検討します。

`progressBar` — 進捗バーの表示

autoplay が有効なときに表示する、次のスライドまでの残り時間を示すバーです。

表示するメリット: ユーザーが「いつ切り替わるか」予測できる
表示しないメリット: UIがシンプルになる

ヒーロー領域では true にしておくと、受動的に眺めるUXと相性が良いです。

Responsive & Extension

`breakpoints` — レスポンシブでのオプション切り替え

breakpoints は max-width基準 のオブジェクトで、各ブレークポイントで上書きしたいオプションを指定します（デスクトップファーストの書き方）。

JavaScript

{
  perPage: 3,
  breakpoints: {
    1024: { perPage: 2 },
    640: { perPage: 1, arrows: false }
  }
}

{
  perPage: 3,
  breakpoints: {
    1024: { perPage: 2 },
    640: { perPage: 1, arrows: false }
  }
}

ブレークポイントは2〜3段階にするのが一般的です。多すぎると挙動が予測しにくくなります。

Auto Scroll拡張

Splide標準の autoplay とは別に、連続的にスクロールし続けるタイプの自動再生を実現する拡張機能です。

やりたいこと	選ぶべき方式
1枚ごとに止めて見せたい	`autoplay`
常に動き続けて止まらない演出	Auto Scroll拡張

Auto Scroll拡張を使う場合は 追加パッケージ が必要で、mount() 時に拡張を渡す必要があります。

JavaScript

import { Splide } from '@splidejs/splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';

new Splide('.splide', {
  type: 'loop',
  autoScroll: { speed: 1 }
}).mount({ AutoScroll });

import { Splide } from '@splidejs/splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';

new Splide('.splide', {
  type: 'loop',
  autoScroll: { speed: 1 }
}).mount({ AutoScroll });

`autoScroll.speed` — Auto Scroll拡張の速度

ピクセル/フレーム単位の数値で指定します。

ゆっくり流す（ロゴ一覧）: 0.5 〜 1
標準: 1 〜 2
速く流す: 3 以上（ただし読めなくなる）

基本は 1 前後。マイナス値にすると逆方向（左→右）に流れます。

autoplay とAuto Scroll拡張は 同時に使わないでください。挙動が競合します。Auto Scrollを有効にするなら autoplay: false にするのが自然です。

ユースケース別の設定テンプレ

よくある3パターンの設定例です。そのまま使えます。

パターン1: ヒーロースライダー（自動再生 + ループ）

JavaScript

{
  type: 'loop',
  perPage: 1,
  perMove: 1,
  speed: 800,
  autoplay: true,
  interval: 5000,
  pauseOnHover: true,
  pauseOnFocus: true,
  resetProgress: true,
  progressBar: true,
  arrows: true,
  pagination: true,
  drag: true
}

{
  type: 'loop',
  perPage: 1,
  perMove: 1,
  speed: 800,
  autoplay: true,
  interval: 5000,
  pauseOnHover: true,
  pauseOnFocus: true,
  resetProgress: true,
  progressBar: true,
  arrows: true,
  pagination: true,
  drag: true
}

パターン2: カード一覧（スワイプ主体・レスポンシブ）

JavaScript

{
  type: 'slide',
  perPage: 3,
  perMove: 1,
  gap: '1.5rem',
  speed: 400,
  arrows: true,
  pagination: true,
  drag: true,
  autoplay: false,
  breakpoints: {
    1024: { perPage: 2 },
    640: { perPage: 1, arrows: false }
  }
}

{
  type: 'slide',
  perPage: 3,
  perMove: 1,
  gap: '1.5rem',
  speed: 400,
  arrows: true,
  pagination: true,
  drag: true,
  autoplay: false,
  breakpoints: {
    1024: { perPage: 2 },
    640: { perPage: 1, arrows: false }
  }
}

パターン3: ロゴティッカー（Auto Scroll拡張）

JavaScript

// npm install @splidejs/splide-extension-auto-scroll
{
  type: 'loop',
  perPage: 5,
  gap: '2rem',
  arrows: false,
  pagination: false,
  drag: true,
  autoplay: false,
  autoScroll: {
    speed: 1,
    pauseOnHover: true
  }
}
// mount時: .mount({ AutoScroll })

// npm install @splidejs/splide-extension-auto-scroll
{
  type: 'loop',
  perPage: 5,
  gap: '2rem',
  arrows: false,
  pagination: false,
  drag: true,
  autoplay: false,
  autoScroll: {
    speed: 1,
    pauseOnHover: true
  }
}
// mount時: .mount({ AutoScroll })

実装前に決めておくこと（チェックリスト）

スライドは止める？流す？（type: slide / loop / fade）
1画面に何枚見せる？（perPage、PC / SP それぞれ）
1回で何枚進む？（perMove）
スライド間の余白は？（gap）
切り替えの速度は？（speed）
arrows と pagination はどちらを表示する？
ドラッグ操作は許可する？（drag）
slide で端で戻す？（rewind）
自動再生する？するなら標準 or Auto Scroll？
自動再生の間隔は？（interval）
ホバー／フォーカスで止める？（pauseOnHover / pauseOnFocus）
ユーザー操作後に進捗リセットする？（resetProgress）
進捗バーは出す？（progressBar）
SP時は何枚表示？（breakpoints）
Auto Scroll拡張を使うなら速度は？（autoScroll.speed）

まとめ

Splideはオプションの組み合わせで挙動が大きく変わります。本記事で紹介した判断軸を踏まえると、オプション設計で迷う時間を減らせます。

基本は type: 'slide' + perPage: 1 or 3 + perMove: 1
自動再生は目的に応じて autoplay / Auto Scroll を選ぶ（併用しない）
アクセシビリティは pauseOnFocus: true と停止手段を忘れない
レスポンシブは breakpoints で max-width 基準

Splideの基本的な使い方から確認したい場合は Splide.jsの使い方：高機能な国産カルーセルスライダーを、設定コードを実際に生成したい場合は Splide Config Builder のようなフォーム入力型ツールを使うと、HTMLと初期化コードもまとめて出力できます。

Splideオプションの選び方：主要16項目を判断軸で整理するガイド

Basic

`type` — スライドの進み方

`perPage` — 1画面に何枚見せるか

`perMove` — 1回の操作で進む枚数

`gap` — スライド間の余白

`speed` — 切り替わりのアニメーション時間（ms）

`arrows` — 左右の矢印ボタン

`drag` — マウス/タッチでドラッグ操作

`rewind` — 端で逆方向に戻す

Autoplay

`autoplay` — 一定間隔の自動再生

`interval` — 自動再生の間隔（ms）

`pauseOnHover` — ホバー時の一時停止

`pauseOnFocus` — フォーカス時の一時停止

`resetProgress` — ユーザー操作後に進捗をリセット

`progressBar` — 進捗バーの表示

Responsive & Extension

`breakpoints` — レスポンシブでのオプション切り替え

Auto Scroll拡張

`autoScroll.speed` — Auto Scroll拡張の速度

ユースケース別の設定テンプレ

パターン1: ヒーロースライダー（自動再生 + ループ）

パターン2: カード一覧（スワイプ主体・レスポンシブ）

パターン3: ロゴティッカー（Auto Scroll拡張）

実装前に決めておくこと（チェックリスト）

まとめ

read next

Splide.jsとmatchMediaで画面幅で切り替える方法

Splide.jsで自動再生の切り替えボタンを作る2つの方法

JavaScriptで背景色に応じてテキスト色を動的に変更する

webpackからviteへの移行で開発速度を改善する実装手順

Basic

type — スライドの進み方

perPage — 1画面に何枚見せるか

perMove — 1回の操作で進む枚数

gap — スライド間の余白

speed — 切り替わりのアニメーション時間（ms）

arrows — 左右の矢印ボタン

pagination — 現在位置を示すドット

drag — マウス/タッチでドラッグ操作

rewind — 端で逆方向に戻す

Autoplay

autoplay — 一定間隔の自動再生

interval — 自動再生の間隔（ms）

pauseOnHover — ホバー時の一時停止

pauseOnFocus — フォーカス時の一時停止

resetProgress — ユーザー操作後に進捗をリセット

progressBar — 進捗バーの表示

Responsive & Extension

breakpoints — レスポンシブでのオプション切り替え

Auto Scroll拡張

autoScroll.speed — Auto Scroll拡張の速度

ユースケース別の設定テンプレ

パターン1: ヒーロースライダー（自動再生 + ループ）

パターン2: カード一覧（スワイプ主体・レスポンシブ）

パターン3: ロゴティッカー（Auto Scroll拡張）

実装前に決めておくこと（チェックリスト）

まとめ

share

read next

Splide.jsとmatchMediaで画面幅で切り替える方法

Splide.jsで自動再生の切り替えボタンを作る2つの方法

JavaScriptで背景色に応じてテキスト色を動的に変更する

webpackからviteへの移行で開発速度を改善する実装手順

`type` — スライドの進み方

`perPage` — 1画面に何枚見せるか

`perMove` — 1回の操作で進む枚数

`gap` — スライド間の余白

`speed` — 切り替わりのアニメーション時間（ms）

`arrows` — 左右の矢印ボタン

`pagination` — 現在位置を示すドット

`drag` — マウス/タッチでドラッグ操作

`rewind` — 端で逆方向に戻す

`autoplay` — 一定間隔の自動再生

`interval` — 自動再生の間隔（ms）

`pauseOnHover` — ホバー時の一時停止

`pauseOnFocus` — フォーカス時の一時停止

`resetProgress` — ユーザー操作後に進捗をリセット

`progressBar` — 進捗バーの表示

`breakpoints` — レスポンシブでのオプション切り替え

`autoScroll.speed` — Auto Scroll拡張の速度