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

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

実はこれ、カルーセル（スライダー）移行で最も多い質問です。
でも安心してください。Splide は “書き方が少し違うだけ” で、あの 中央2枚＋左右チラ見せ が簡単に作れます。

この記事では、
導入方法（読み込み） → centerModeの再現 → Slickとの比較
まで解説しています。両端ズラしに悩んで Splide 導入を渋っていた方は、ぜひこのやり方を試してください。

まずは Splide を使えるようにしよう（読み込み）

初心者が最初につまづきやすいのは「そもそも Splide の読み込みってどうするの？」という部分。ここもゼロから説明します。

▼ CDNでサクッと読み込む（初心者に一番おすすめ）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css">
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>

これだけで Splide が使える状態になります。
※最新バージョンは 公式 で確認を。

Slick の読み込み（比較や移行のため）

「今まで Slick を使ってた人向け」にも、読み込みをおさらいしておきます。

▼ CDNでの基本読み込み

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Slick は jQuery が必須 なので、読み込みが重くなるのが弱点です。

公式リンク一覧（安全に最新情報を確認できる場所）

• Splide 公式サイト
  https://splidejs.com/
• Splide GitHub
  https://github.com/Splidejs/splide
• Slick 公式サイト（Ken Wheeler）
  https://kenwheeler.github.io/slick/
• Slick GitHub（※ほぼ保守停止）
  https://github.com/kenwheeler/slick

Splide と Slick の比較

初学者でもわかる違いまとめ

IT業界の背景：どれだけ貢献してきたか

🔵 Slick（2014〜2020頃）

• jQuery全盛期を支えた「定番スライダー」
• WordPress・企業サイト・ECサイトで圧倒的シェア
• 「とりあえず Slick」で通じる時代があった
• Web制作業界の基盤を作った存在

🔵 Splide（2020〜現在）

• jQuery不要の軽量スライダーとして人気上昇
• Vue / React / Nuxt / Next と相性抜群
• 海外案件での採用も増加
• TypeScript対応でモダン開発に強い
• 公式ドキュメントが丁寧で初心者にも優しい

要約：

• 過去の貢献 → Slick
• これからのスタンダード → Splide

いよいよ本題：Splideで centerMode を再現

▼ コピペだけで動くコード

<div class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide"><img src="image1.jpg" alt=""></li>
      <li class="splide__slide"><img src="image2.jpg" alt=""></li>
      <li class="splide__slide"><img src="image3.jpg" alt=""></li>
      <li class="splide__slide"><img src="image4.jpg" alt=""></li>
    </ul>
  </div>
</div>

<script>
new Splide('.splide', {
  type: 'loop',
  perPage: 2,
  focus: 0,
  padding: { left: '16%', right: '16%' },
  gap: '1rem',
  arrows: true,
  pagination: true,
}).mount();
</script>

初心者にもわかる！SplideでcenterModeを再現する仕組み

① perPage: 2

中央に2枚出すための設定です。

② focus: 0

ここがsplideの最大のポイント
center にすると左右チラ見せできないため、左寄せにして余白を自由に扱えるようにします。

③ padding: { left: '16%', right: '16%' }

この余白に次のスライドがチラっと見える形になります。

まとめ：用途に合わせて最適なライブラリを。ただし今から選ぶなら Splide が強い

本来、このようなスライダー／カルーセル系ライブラリは、
案件や要件に合わせて最適なものを選択することが一番大切です。 Slick が向いている場面もあれば、Swiper が合うケース、あるいは Splide が最適なこともあります。

ただ、その上であえてひとつ選ぶなら、今の時代性・軽さ・メンテナンス性・jQuery不要 の点から、Splide は非常に強い選択肢です。
しかも 日本発の国産ライブラリで、ドキュメントも丁寧で初心者に扱いやすい のが大きな魅力。

「Slick の centerMode をどう再現しよう…」という悩みも、この記事の方法で（完璧とはいきませんが）解決できます。 これからカルーセルを導入する案件では、Splide を積極的に検討してみてください。

それでは—— みなさま、よきカルーセルライフを！🎡✨