「Slick から Splide に乗り換えたい。でも Slick にあった centerMode は Splide だとどうやって再現するの？」
実はこれ、カルーセル（スライダー）移行で最も多い質問です。
でも安心してください。Splide は “書き方が少し違うだけ” で、あの 中央2枚＋左右チラ見せ が簡単に作れます。
この記事では、
導入方法（読み込み） → centerModeの再現 → Slickとの比較
まで解説しています。両端ズラしに悩んで Splide 導入を渋っていた方は、ぜひこのやり方を試してください。
初心者が最初につまづきやすいのは「そもそも Splide の読み込みってどうするの？」という部分。ここもゼロから説明します。
<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 を使ってた人向け」にも、読み込みをおさらいしておきます。
<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 | Slick |
|---|---|---|
| リリース年 | 2020〜（新しい） | 2014〜（古株） |
| メンテ状況 | 活発 | ほぼ停止 |
| 依存関係 | なし（純JS） | jQuery必須 |
| ファイルサイズ | 約30KB | 100KB以上（jQuery含む） |
| 動作速度 | 軽快 | 重め |
| レスポンシブ | 柔軟 | 古い書き方 |
| 学習コスト | 低い | 情報は多いが古い |
| 業界貢献 | モダンで採用増 | 10年業界を支えた功労者 |
要約：
<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>
実際の動き
中央に2枚出すための設定です。
ここがsplideの最大のポイント
center にすると左右チラ見せできないため、左寄せにして余白を自由に扱えるようにします。
この余白に次のスライドがチラっと見える形になります。
本来、このようなスライダー／カルーセル系ライブラリは、
案件や要件に合わせて最適なものを選択することが一番大切です。 Slick が向いている場面もあれば、Swiper が合うケース、あるいは Splide が最適なこともあります。
ただ、その上であえてひとつ選ぶなら、今の時代性・軽さ・メンテナンス性・jQuery不要 の点から、Splide は非常に強い選択肢です。
しかも 日本発の国産ライブラリで、ドキュメントも丁寧で初心者に扱いやすい のが大きな魅力。
「Slick の centerMode をどう再現しよう…」という悩みも、この記事の方法で（完璧とはいきませんが）解決できます。 これからカルーセルを導入する案件では、Splide を積極的に検討してみてください。
それでは—— みなさま、よきカルーセルライフを！🎡✨