両端チラ見せのずらしスライダーをSplideでつくる！SlickのcenterModeをやさしく再現

「Slick から Splide に乗り換えたい。でも Slick にあった centerMode は Splide だとどうやって再現するの？」

カルーセル（スライダー）ライブラリの移行でもっとも多い質問のひとつです。
結論からいうと、Splide では書き方が少し違うだけで、あの「中央2枚＋左右チラ見せ」が簡単に作れます。

この記事では次の流れで解説します。

Splide の導入方法（CDN / npm）
Slick の読み込みおさらいと比較
Splide と Slick の機能・性能比較
centerMode の再現コード（コピペで動く）
仕組みの解説（初心者向け）

Splide 導入に踏み切れなかった方も、この記事を読めばすぐに実装できます。

Splide とは？なぜ今 Splide が選ばれるのか

Splide は、日本人エンジニアが開発した jQuery 不要の軽量カルーセルライブラリ です。2020年のリリース以降、モダンな Web 開発での採用が急増しています。

ファイルサイズ約 30KB（jQuery 込みの Slick と比べて大幅に軽量）
TypeScript 対応・アクセシビリティ（WAI-ARIA）対応
Vue / React / Nuxt / Next.js との相性が良い
公式ドキュメントが日本語対応で初心者にも優しい
現在もメンテナンスが活発

「jQuery に依存したくない」「パフォーマンスを改善したい」という現場のニーズに応えるライブラリとして、多くの制作現場で採用されています。

Splide の読み込み方法

初心者がつまづきやすい「読み込み」から説明します。

CDN で読み込む（初心者・手軽に試したい方向け）

<head> 内に CSS を、</body> 直前に JS を記述します。

<!-- CSS（head内に記述） -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">

<!-- JS（body閉じタグ直前に記述） -->
<script
  src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js">
</script>

※最新バージョンは Splide 公式サイトで確認してください。

npm でインストール（Vue / React などのフレームワーク利用者向け）

npm install @splidejs/splide

Slick の読み込み方法（移行前のおさらい）

Slick から乗り換える方向けに、Slick の読み込みもおさらいします。

Slick の CDN 読み込み

<!-- CSS -->
<link rel="stylesheet" type="text/css"
  href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">

<!-- jQuery（必須） -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Slick JS -->
<script
  src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js">
</script>

Slick は jQuery が必須 のため、jQuery 本体（約87KB）も一緒に読み込む必要があります。これが表示速度に影響します。

公式リンク一覧

Splide 公式サイト（日本語あり）：https://ja.splidejs.com/
Splide GitHub：https://github.com/Splidejs/splide
Slick 公式サイト：https://kenwheeler.github.io/slick/
Slick GitHub（※保守はほぼ停止）：https://github.com/kenwheeler/slick

Splide と Slick の比較表

どちらを使うか迷っている方向けに、主要な項目を比較します。

表：SplideとSlickの機能・性能比較
項目	Splide	Slick
リリース年	2020年〜（比較的新しい）	2014年〜（実績豊富）
メンテナンス状況	活発（定期更新あり）	ほぼ停止
依存関係	なし（純粋な JavaScript）	jQuery 必須
ファイルサイズ	約 30KB	100KB 以上（jQuery 込み）
動作速度	軽快	やや重め
レスポンシブ対応	柔軟・モダンな記法	対応しているが書き方が古い
アクセシビリティ	WAI-ARIA 対応	限定的
TypeScript 対応	あり	なし
フレームワーク連携	Vue / React / Nuxt / Next 対応	jQuery 依存のため限定的
学習コスト	低い（ドキュメントが丁寧）	情報は多いが古いものが混在

Slick と Splide それぞれが果たした役割

Slick（2014〜2020年頃）が Web 業界に与えた影響

jQuery 全盛期を支えた「定番スライダー」として圧倒的シェアを誇った
WordPress・企業サイト・EC サイトで広く採用された
「スライダーを入れたい＝Slick」で通じる時代が存在した
多くの Web 制作者のスキルアップに貢献した功労者

Splide（2020年〜現在）が広まった背景

jQuery 依存を排した軽量スライダーとして人気が急上昇
Vue / React / Nuxt / Next.js との相性が良く、モダン開発に採用されやすい
TypeScript 対応でチーム開発にも馴染みやすい
公式ドキュメントが日本語対応で初心者にも優しい（国産ライブラリの強み）
アクセシビリティへの配慮が標準で盛り込まれている

まとめると：Slick は業界の基礎を作り、Splide はそれを引き継いで進化させた存在です。

Splide で centerMode を再現するコード（コピペで動く）

いよいよ本題です。Slick の centerMode に相当する「両端チラ見せカルーセル」を Splide で実装します。

HTML 構造

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="image1.jpg" alt="スライド1"></li>
      <li class="splide__slide"><img src="image2.jpg" alt="スライド2"></li>
      <li class="splide__slide"><img src="image3.jpg" alt="スライド3"></li>
      <li class="splide__slide"><img src="image4.jpg" alt="スライド4"></li>
    </ul>
  </div>
</div>

JavaScript（初期化コード）

<script>
new Splide('.splide', {
  type    : 'loop',   // ループ再生
  perPage : 2,        // 中央に2枚表示
  focus   : 0,        // 左寄せ（チラ見せに必要）
  padding : { left: '16%', right: '16%' }, // 両端にチラ見せ幅を確保
  gap     : '1rem',   // スライド間の余白
  arrows  : true,
  pagination: true,
}).mount();
</script>

仕組みの解説：3つのオプションで両端チラ見せが完成する

① `perPage: 2` — 中央に何枚表示するか

画面内に表示するスライドの枚数を指定します。2 にすることで中央に2枚が並び、その左右に余白が生まれます。

② `focus: 0` — ここが Splide 最大のポイント

Slick の centerMode: true に相当する設定です。center を指定すると左右対称になりすぎてチラ見せが機能しないため、0（左寄せ）にして余白を自由にコントロールします。

③ `padding: { left: '16%', right: '16%' }` — チラ見せの幅を決める

スライダーの左右に余白を作ることで、前後のスライドが少しだけ見える「チラ見せ」効果が生まれます。数値を変えると見え方が変わるので、デザインに合わせて調整してください。

レスポンシブ対応：画面サイズで設定を切り替える

スマートフォンでは1枚表示に切り替えるなど、breakpoints オプションで画面幅ごとに設定を変えることができます。

new Splide('.splide', {
  type    : 'loop',
  perPage : 2,
  focus   : 0,
  padding : { left: '16%', right: '16%' },
  gap     : '1rem',
  breakpoints: {
    640: {
      perPage : 1,
      padding : { left: '10%', right: '10%' },
    },
  },
}).mount();

まとめ：Slick の centerMode は Splide で再現できる

カルーセルライブラリはプロジェクトの要件によって最適な選択肢が異なります。Slick が向いている場面も Swiper が合うケースもあります。

ただし 今から新規で導入するなら Splide は非常に有力な選択肢 です。理由は以下のとおりです。

jQuery 不要で軽量・表示速度が改善する
モダンなフレームワークと相性が良い
メンテナンスが継続されており、将来的な安心感がある
日本語ドキュメントが充実しており、国内エンジニアが学びやすい
WAI-ARIA 対応でアクセシビリティ要件にも応えやすい

「Slick の centerMode が Splide で再現できるか」という悩みは、この記事の方法で解決できます。ぜひ試してみてください。

よくある質問（FAQ）

Q. Splide と Swiper はどちらがおすすめですか？

どちらも jQuery 不要の軽量ライブラリです。Swiper はより多機能で、特に 3D エフェクトや縦方向スクロールに強みがあります。Splide はシンプルで軽量、ドキュメントが日本語対応している点が強みです。機能要件が複雑でなければ Splide の方が学習コストが低くおすすめです。

Q. Splide で autoplay（自動再生）はできますか？

はい、autoplay: true オプションを追加するだけで自動再生が有効になります。interval オプションで間隔（ミリ秒）も設定できます。

new Splide('.splide', {
  type    : 'loop',
  autoplay: true,
  interval: 3000, // 3秒ごとに切り替え
}).mount();

Q. Slick から Splide への移行で注意すべき点は？

オプション名が異なる点に注意が必要です。たとえば Slick の slidesToShow は Splide では perPage、slidesToScroll は perMove に対応します。また、Slick は jQuery プラグインとして初期化しますが、Splide は new Splide(...).mount() という形で初期化します。

それでは——よきカルーセルライフを！