---
title: 両端チラ見せのずらしスライダーをSplideでつくる！SlickのcenterModeをやさしく再現
description: Splideを使ってSlickのcenterModeを再現する方法を解説。軽量で初心者に優しいライブラリの魅力と具体的な実装例を紹介します。
image: https://www.insemble.co.jp/hubfs/blog/splide_OGP.png
---
[](https://www.insemble.co.jp/)
サービス
実績
会社概要
ブログ
[無料で相談する](https://www.insemble.co.jp/contact)
[無料相談](https://www.insemble.co.jp/contact)
MENU
Web制作・運用
[**ホームページ制作**目的と予算から設計・制作](https://www.insemble.co.jp/service/website-sapporo) [**Webサイトのリニューアル**検索の評価を引き継いで作り直す](https://www.insemble.co.jp/service/renewal) [**ホームページ保守・運用代行**更新・サーバー管理を月額で](https://www.insemble.co.jp/service/maintenance) [**らくっとホームページ**テンプレートで手早く始める](https://www.insemble.co.jp/rakutto-hp) [**ECサイト制作・Shopify導入**小さなお店のネット販売](https://www.insemble.co.jp/service/shopify) [**MovableType.net導入支援**サーバー管理のいらないCMS](https://www.insemble.co.jp/service/movabletype-net)
集客・解析
[**Webマーケティング支援**広告・LP・SEOで問い合わせを増やす](https://www.insemble.co.jp/service/web-marketing) [**SEO対策・AI検索対策**検索とAIの回答で見つけてもらう](https://www.insemble.co.jp/service/seo) [**アクセス解析**数字から次に直すことを決める](https://www.insemble.co.jp/service/traffic-analysis)
業務改善・DX
[**kintone導入・構築支援**Excelや紙の管理を仕組みに](https://www.insemble.co.jp/service/kintone) [**札幌でのDX推進の取り組み**DX認定事業者としての取り組み](https://www.insemble.co.jp/service/dx-sapporo)
迷ったら
どれを頼めばいいか
分からないときは
困りごとを選ぶと、担当のサービスが分かります。
[困りごとから探す →](https://www.insemble.co.jp/service#needs) [サービス一覧を見る →](https://www.insemble.co.jp/service) [無料で相談する](https://www.insemble.co.jp/contact)
実績
[**制作実績**業種・CMS別に事例を探す](https://www.insemble.co.jp/works) [**サポート実績**保守・運用で継続支援中の事例](https://www.insemble.co.jp/works/support)
[ 最新の実績｜リニューアル **建築エネルギー研究所 様** 建設・建築 ／ MovableType.net](https://www.insemble.co.jp/news/ene-ken)
迷ったら
どれを頼めばいいか
分からないときは
困りごとを選ぶと、担当のサービスが分かります。
[困りごとから探す →](https://www.insemble.co.jp/service#needs) [無料で相談する](https://www.insemble.co.jp/contact)
会社概要
[**会社概要**代表あいさつ・会社情報](https://www.insemble.co.jp/company) [**サイトマップ**サイト内のページ一覧](https://www.insemble.co.jp/sitemap)
迷ったら
どれを頼めばいいか
分からないときは
困りごとを選ぶと、担当のサービスが分かります。
[困りごとから探す →](https://www.insemble.co.jp/service#needs) [無料で相談する](https://www.insemble.co.jp/contact)
ブログ・読みもの
[**お知らせ・ブログ**Web運用・SEO・kintoneのノウハウ](https://www.insemble.co.jp/news) [**ロカプレ！（外部サイト・新しいタブで開きます）**北海道のスモールビジネスを応援するメディア](https://loca-play.jp/) [**きじかん（外部サイト・新しいタブで開きます）**数年先の予定を知らせる長期リマインダー](https://kijican.jp/)
迷ったら
どれを頼めばいいか
分からないときは
困りごとを選ぶと、担当のサービスが分かります。
[困りごとから探す →](https://www.insemble.co.jp/service#needs) [無料で相談する](https://www.insemble.co.jp/contact)
サービス
[困りごとから探す →どれを頼めばいいか分からないときは](https://www.insemble.co.jp/service#needs)
Web制作・運用
[ホームページ制作](https://www.insemble.co.jp/service/website-sapporo) [Webサイトのリニューアル](https://www.insemble.co.jp/service/renewal) [ホームページ保守・運用代行](https://www.insemble.co.jp/service/maintenance) [らくっとホームページ](https://www.insemble.co.jp/rakutto-hp) [ECサイト制作・Shopify導入](https://www.insemble.co.jp/service/shopify) [MovableType.net導入支援](https://www.insemble.co.jp/service/movabletype-net)
集客・解析
[Webマーケティング支援](https://www.insemble.co.jp/service/web-marketing) [SEO対策・AI検索対策](https://www.insemble.co.jp/service/seo) [アクセス解析](https://www.insemble.co.jp/service/traffic-analysis)
業務改善・DX
[kintone導入・構築支援](https://www.insemble.co.jp/service/kintone) [札幌でのDX推進の取り組み](https://www.insemble.co.jp/service/dx-sapporo) [サービス一覧を見る →](https://www.insemble.co.jp/service)
実績
[制作実績](https://www.insemble.co.jp/works) [サポート実績](https://www.insemble.co.jp/works/support)
会社概要
[会社概要](https://www.insemble.co.jp/company) [サイトマップ](https://www.insemble.co.jp/sitemap)
ブログ・読みもの
[お知らせ・ブログ](https://www.insemble.co.jp/news) [ロカプレ！（外部サイト・新しいタブで開きます）](https://loca-play.jp/) [きじかん（外部サイト・新しいタブで開きます）](https://kijican.jp/)
[無料で相談する →](https://www.insemble.co.jp/contact)
相談・お見積りは無料｜3営業日以内にメールでご返信
1. [ホーム](https://www.insemble.co.jp/)
2. [ブログ](https://www.insemble.co.jp/news)
3. 両端チラ見せのずらしスライダーをSplideでつくる！SlickのcenterModeをやさしく再現
[ブログ](https://www.insemble.co.jp/news/tag/ブログ)
# 両端チラ見せのずらしスライダーをSplideでつくる！SlickのcenterModeをやさしく再現
Splideを使ってSlickのcenterModeを再現する方法を解説。軽量で初心者に優しいライブラリの魅力と具体的な実装例を紹介します。
Inインセンブル編集部 公開**2026.02.02**
## 目次 閉じる
2026年5月15日更新 · インセンブル編集部
「Slick から Splide に乗り換えたい。でも Slick にあった *centerMode* は Splide だとどうやって再現するの？」
カルーセル（スライダー）ライブラリの移行でもっとも多い質問のひとつです。
結論からいうと、**Splide では書き方が少し違うだけで、あの「中央2枚＋左右チラ見せ」が簡単に作れます。**
この記事では次の流れで解説します。
1. Splide の導入方法（CDN / npm）
2. Slick の読み込みおさらいと比較
3. Splide と Slick の機能・性能比較
4. **centerMode の再現コード（コピペで動く）**
5. 仕組みの解説（初心者向け）
Splide 導入に踏み切れなかった方も、この記事を読めばすぐに実装できます。
## Splide とは？なぜ今 Splide が選ばれるのか
**Splide** は、日本人エンジニアが開発した **jQuery 不要の軽量カルーセルライブラリ** です。2020年のリリース以降、モダンな Web 開発での採用が急増しています。
- ファイルサイズ約 30KB（jQuery 込みの Slick と比べて大幅に軽量）
- TypeScript 対応・アクセシビリティ（WAI-ARIA）対応
- Vue / React / Nuxt / Next.js との相性が良い
- 公式ドキュメントが日本語対応で初心者にも優しい
- 現在もメンテナンスが活発
「jQuery に依存したくない」「パフォーマンスを改善したい」という現場のニーズに応えるライブラリとして、多くの制作現場で採用されています。インセンブルでも、新規制作やサイトリニューアルの案件で Splide を採用するケースが増えています。
## Splide の読み込み方法
初心者がつまづきやすい「読み込み」から説明します。
### CDN で読み込む（初心者・手軽に試したい方向け）
`` 内に CSS を、`` 直前に JS を記述します。
```
```
※最新バージョンは [Splide 公式サイト](https://ja.splidejs.com/) で確認してください。
### npm でインストール（Vue / React などのフレームワーク利用者向け）
```
npm install @splidejs/splide
```
## Slick の読み込み方法（移行前のおさらい）
Slick から乗り換える方向けに、Slick の読み込みもおさらいします。
### Slick の CDN 読み込み
```
```
Slick は **jQuery が必須** のため、jQuery 本体（約87KB）も一緒に読み込む必要があります。これが表示速度に影響します。
### 公式リンク一覧
- **Splide 公式サイト（日本語あり）**：[https://ja.splidejs.com/](https://ja.splidejs.com/)
- **Splide GitHub**：[https://github.com/Splidejs/splide](https://github.com/Splidejs/splide)
- **Slick 公式サイト**：[https://kenwheeler.github.io/slick/](https://kenwheeler.github.io/slick/)
- **Slick GitHub**（※保守はほぼ停止）：[https://github.com/kenwheeler/slick](https://github.com/kenwheeler/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 構造
```
```
### JavaScript（初期化コード）
```
```
実際の動き（デモ）
- 
- 
- 
- 
## 仕組みの解説：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()` という形で初期化します。
## Web サイトの表示速度改善・フロントエンド実装でお困りの場合
インセンブルでは、Splide をはじめとしたモダンなフロントエンド技術を活用したウェブ制作・サイトリニューアルを行っています。「jQuery 依存の古いサイトを刷新したい」「表示速度を改善したい」「スライダーの実装をまるごと依頼したい」といったご相談もお気軽にどうぞ。
[お問い合わせはこちら](https://www.insemble.co.jp/contact/)
In
この記事を書いた人
## インセンブル編集部
株式会社インセンブル（札幌・2014年創業）は、中小企業のWeb運用・マーケティング・kintone導入を支援しています。64社以上の制作・運用の実務で分かったことを記事にしています。
[会社概要 →](https://www.insemble.co.jp/company)[無料で相談する →](https://www.insemble.co.jp/contact)
Next
## 「ブログ」の記事をもっと読む
[ 2026.10.20 **WordPressのバージョンアップは必要？更新の注意点と不具合の対応事例**](https://www.insemble.co.jp/news/wordpress-version-update) [ 2026.09.11 **札幌のホームページ制作会社の選び方｜比較すべき5つのポイント**](https://www.insemble.co.jp/news/sapporo-web-company-how-to-choose)
**この記事をシェア**
[X](https://twitter.com/intent/tweet?text=%E4%B8%A1%E7%AB%AF%E3%83%81%E3%83%A9%E8%A6%8B%E3%81%9B%E3%81%AE%E3%81%9A%E3%82%89%E3%81%97%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC%E3%82%92Splide%E3%81%A7%E3%81%A4%E3%81%8F%E3%82%8B%EF%BC%81Slick%E3%81%AEcenterMode%E3%82%92%E3%82%84%E3%81%95%E3%81%97%E3%81%8F%E5%86%8D%E7%8F%BE&url=https%3A%2F%2Fwww.insemble.co.jp%2Fnews%2Fsplide) [Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.insemble.co.jp%2Fnews%2Fsplide) [LINE](https://social-plugins.line.me/lineit/share?url=https%3A%2F%2Fwww.insemble.co.jp%2Fnews%2Fsplide)
URLをコピー
[「ブログ」の記事一覧へ](https://www.insemble.co.jp/news/tag/ブログ) [ブログ一覧へ戻る](https://www.insemble.co.jp/news)
## 目次
無料診断
### 保守会社 乗り換えリスク診断
5つの質問に答えるだけ。約1分で、見えていないリスクをチェックできます。
[無料で診断する →](https://www.insemble.co.jp/diagnosis/maintenance-checklist)
Contact
## まず、話してみませんか。
課題が明確でなくても構いません。「こういうことで困っている」というご相談から始めましょう。
[無料で相談する →](https://www.insemble.co.jp/contact)
Mission
働く人を、*ITの力で*前に進める。
[Insemble](https://www.insemble.co.jp/)
株式会社インセンブル
〒060-0033 北海道札幌市中央区北3条東2丁目2-24 三博ビル3F
[無料で相談する](https://www.insemble.co.jp/contact) 相談・お見積りは無料｜3営業日以内にメールでご返信
## サービス
### Web制作・運用
- [ホームページ制作](https://www.insemble.co.jp/service/website-sapporo)
- [Webサイトのリニューアル](https://www.insemble.co.jp/service/renewal)
- [ホームページ保守・運用代行](https://www.insemble.co.jp/service/maintenance)
- [らくっとホームページ](https://www.insemble.co.jp/rakutto-hp)
- [ECサイト制作・Shopify導入](https://www.insemble.co.jp/service/shopify)
- [MovableType.net導入支援](https://www.insemble.co.jp/service/movabletype-net)
### 集客・解析
- [Webマーケティング支援](https://www.insemble.co.jp/service/web-marketing)
- [SEO対策・AI検索対策](https://www.insemble.co.jp/service/seo)
- [アクセス解析](https://www.insemble.co.jp/service/traffic-analysis)
### 業務改善・DX
- [kintone導入・構築支援](https://www.insemble.co.jp/service/kintone)
[サービス一覧・困りごとから探す →](https://www.insemble.co.jp/service)
## 実績
- [制作実績](https://www.insemble.co.jp/works)
- [サポート実績](https://www.insemble.co.jp/works/support)
- [お客様インタビュー](https://www.insemble.co.jp/interview/sapporo-romantei)
## 会社概要
- [会社概要](https://www.insemble.co.jp/company)
- [札幌でのDX推進の取り組み](https://www.insemble.co.jp/service/dx-sapporo)
- [DX宣言書](https://www.insemble.co.jp/dx-declaration)
## ブログ・読みもの
- [お知らせ・ブログ](https://www.insemble.co.jp/news)
- [ロカプレ！（外部サイト・新しいタブで開きます）](https://loca-play.jp/)
- [きじかん（外部サイト・新しいタブで開きます）](https://kijican.jp/)
© 2014–2026 Insemble Co.,Ltd.
[プライバシーポリシー](https://www.insemble.co.jp/privacy)[サイトマップ](https://www.insemble.co.jp/sitemap)
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "Admin",
"url" : "https://www.insemble.co.jp/news/author/admin"
},
"dateModified" : "2026-05-15T13:33:38.613Z",
"datePublished" : "2026-02-02T07:00:00.000Z",
"headline" : "両端チラ見せのずらしスライダーをSplideでつくる！SlickのcenterModeをやさしく再現",
"mainEntityOfPage" : {
"@id" : "https://www.insemble.co.jp/news/splide",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://www.insemble.co.jp/hubfs/Insemble_July2020/Images/logo_txt.svg"
},
"name" : "株式会社インセンブル"
}
}
```
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Person",
"name" : "インセンブル編集部"
},
"dateModified" : "2026-05-15",
"datePublished" : "2026-05-15",
"description" : "SlickのcenterModeをSplideで再現する方法を解説。HTMLとJavaScriptのコードをコピペで使える形で紹介し、perPage・focus・paddingの3つのオプションの仕組みも説明します。",
"headline" : "SlickのcenterModeをSplideで再現する方法【コピペで動くコード付き】",
"inLanguage" : "ja",
"publisher" : {
"@type" : "Organization",
"name" : "インセンブル"
}
}
```
```json
{
"@context" : "https://schema.org",
"@type" : "FAQPage",
"mainEntity" : [ {
"@type" : "Question",
"acceptedAnswer" : {
"@type" : "Answer",
"text" : "どちらも jQuery 不要の軽量ライブラリです。Swiper はより多機能で、特に 3D エフェクトや縦方向スクロールに強みがあります。Splide はシンプルで軽量、ドキュメントが日本語対応している点が強みです。機能要件が複雑でなければ Splide の方が学習コストが低くおすすめです。"
},
"name" : "Splide と Swiper はどちらがおすすめですか？"
}, {
"@type" : "Question",
"acceptedAnswer" : {
"@type" : "Answer",
"text" : "はい、autoplay: true オプションを追加するだけで自動再生が有効になります。interval オプションで間隔（ミリ秒）も設定できます。"
},
"name" : "Splide で autoplay（自動再生）はできますか？"
}, {
"@type" : "Question",
"acceptedAnswer" : {
"@type" : "Answer",
"text" : "オプション名が異なる点に注意が必要です。Slick の slidesToShow は Splide では perPage、slidesToScroll は perMove に対応します。また、Slick は jQuery プラグインとして初期化しますが、Splide は new Splide(...).mount() という形で初期化します。"
},
"name" : "Slick から Splide への移行で注意すべき点は？"
} ]
}
```
```json
{
"@context" : "https://schema.org",
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://www.insemble.co.jp/hubfs/insemble_2025/images/logo.svg"
},
"name" : "株式会社インセンブル",
"sameAs" : [ ],
"url" : "https://www.insemble.co.jp/"
}
```
```json
{
"@context" : "https://schema.org",
"@type" : "BlogPosting",
"author" : {
"@type" : "Organization",
"name" : "株式会社インセンブル",
"url" : "https://www.insemble.co.jp/"
},
"dateModified" : "2026-05-15T13:33:38",
"datePublished" : "2026-02-02T07:00:00",
"description" : "Splideを使ってSlickのcenterModeを再現する方法を解説。軽量で初心者に優しいライブラリの魅力と具体的な実装例を紹介します。",
"headline" : "両端チラ見せのずらしスライダーをSplideでつくる！SlickのcenterModeをやさしく再現",
"image" : "https://5563745.fs1.hubspotusercontent-na2.net/hubfs/5563745/blog/splide_OGP.png",
"mainEntityOfPage" : {
"@id" : "https://www.insemble.co.jp/news/splide",
"@type" : "WebPage"
},
"publisher" : {
"@type" : "Organization",
"logo" : {
"@type" : "ImageObject",
"url" : "https://www.insemble.co.jp/hubfs/insemble_2025/images/logo.svg"
},
"name" : "株式会社インセンブル",
"url" : "https://www.insemble.co.jp/"
},
"url" : "https://www.insemble.co.jp/news/splide"
}
```
```json
{
"@context" : "https://schema.org",
"@type" : "BreadcrumbList",
"itemListElement" : [ {
"@type" : "ListItem",
"item" : "https://www.insemble.co.jp/",
"name" : "ホーム",
"position" : 1
}, {
"@type" : "ListItem",
"item" : "https://www.insemble.co.jp/news",
"name" : "ブログ",
"position" : 2
}, {
"@type" : "ListItem",
"item" : "https://www.insemble.co.jp/news/splide",
"name" : "両端チラ見せのずらしスライダーをSplideでつくる！SlickのcenterModeをやさしく再現",
"position" : 3
} ]
}
```
