「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 の比較
初学者でもわかる違いまとめ
| 項目 | Splide | Slick |
|---|---|---|
| リリース年 | 2020〜（新しい） | 2014〜（古株） |
| メンテ状況 | 活発 | ほぼ停止 |
| 依存関係 | なし（純JS） | jQuery必須 |
| ファイルサイズ | 約30KB | 100KB以上（jQuery含む） |
| 動作速度 | 軽快 | 重め |
| レスポンシブ | 柔軟 | 古い書き方 |
| 学習コスト | 低い | 情報は多いが古い |
| 業界貢献 | モダンで採用増 | 10年業界を支えた功労者 |
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 を積極的に検討してみてください。
それでは—— みなさま、よきカルーセルライフを！🎡✨
