---
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/)
サービス
実績
会社案内
ブログ/メディア
[ホームページ制作 札幌を拠点に、課題解決の視点で最適なWebサイトを制作します。](https://www.insemble.co.jp/service/website-sapporo) [Webサイトのリニューアル デザインや機能を一新し、より魅力的なWebサイトへ再構築します。](https://www.insemble.co.jp/service/renewal) [Webサイトの運営支援 更新・保守・改修をまとめてサポート。アクセス増加も促進します。](https://www.insemble.co.jp/service/maintenance) [ECサイト制作・Shopify導入 Shopifyを活用したECサイトの構築・運用をサポートします。](https://www.insemble.co.jp/service/shopify) [MovableType.net導入 MovableType.netの導入からカスタマイズまで対応可能です。](https://www.insemble.co.jp/service/movabletype-net) [らくっとホームページ 誰でも簡単に更新できる「らくっとホームページ」をご提供。](https://www.insemble.co.jp/rakutto-hp) [Webマーケティング支援 SEO・Web広告・SNS・コンテンツを組み合わせた、集客・売上改善をトータルで支援します。](https://www.insemble.co.jp/service/web-marketing) [SEO対策 検索順位の向上と集客強化のためのSEO支援を行います。](https://www.insemble.co.jp/service/seo) [アクセス解析 サイトの訪問データを活用し、改善点を明確にします。](https://www.insemble.co.jp/service/traffic-analysis) [kintone導入・カスタマイズ 業務の効率化を図るkintone導入やカスタマイズを支援します。](https://www.insemble.co.jp/service/kintone) [無料のIT相談 ITに関するお悩みを無料でご相談いただけます。](https://www.insemble.co.jp/consultation) [サービス一覧 提供するすべてのサービスを確認する。](https://www.insemble.co.jp/service)
[サポートの実績 過去に対応したWeb・システムサポート事例をご紹介します。](https://www.insemble.co.jp/works/support) [Webサイトの制作実績 これまでに手がけたWebサイト制作の事例です。](https://www.insemble.co.jp/works) [システム開発の実績 これまでに手がけたシステム開発の事例です。](https://www.insemble.co.jp/works) [お客様インタビュー 実際にご依頼いただいたお客様の声をご紹介しています。](https://www.insemble.co.jp/interview/sapporo-romantei)
[会社概要 当社の基本情報や所在地、沿革についてご紹介します。](https://www.insemble.co.jp/company) [お知らせ・ブログ 最新のお知らせや更新情報をご案内します。](https://www.insemble.co.jp/news) [お問い合わせ サービスに関するご相談・ご質問はこちらからどうぞ。](https://www.insemble.co.jp/contact)
[お知らせ・ブログ 記事の一覧はこちら](https://www.insemble.co.jp/news) [ロカプレ！（ローカルビジネス応援メディア） 地域ビジネスを応援する外部メディアサイト](https://loca-play.jp/)
[](https://www.insemble.co.jp/)
- Service
- [サービス一覧](https://www.insemble.co.jp/service)
- [ホームページ制作](https://www.insemble.co.jp/service/website-sapporo)
- [Webサイトのリニューアル](https://www.insemble.co.jp/service/renewal)
- [Webサイトの運営支援](https://www.insemble.co.jp/service/maintenance)
- [ECサイト制作・Shopify導入](https://www.insemble.co.jp/service/shopify)
- [MovableType.net導入](https://www.insemble.co.jp/service/movabletype-net)
- [らくっとホームページ](https://www.insemble.co.jp/rakutto-hp)
- [Webマーケティング支援](https://www.insemble.co.jp/service/web-marketing)
- [SEO対策](https://www.insemble.co.jp/service/seo)
- [アクセス解析](https://www.insemble.co.jp/service/traffic-analysis)
- [kintone導入・カスタマイズ](https://www.insemble.co.jp/service/kintone)
- [無料のIT相談](https://www.insemble.co.jp/consultation)
- Works
- [サポートの実績](https://www.insemble.co.jp/works/support)
- [Webサイトの制作実績](https://www.insemble.co.jp/works)
- [システム開発の実績](https://www.insemble.co.jp/works)
- [お客様インタビュー](https://www.insemble.co.jp/interview/sapporo-romantei)
- Company
- [会社概要](https://www.insemble.co.jp/company)
- [お知らせ・ブログ](https://www.insemble.co.jp/news)
- [プライバシーポリシー・情報セキュリティ基本方針](https://www.insemble.co.jp/privacy)
- [DX宣言書](https://www.insemble.co.jp/dx-declaration)
- [DX推進のメリットと取り組み](https://www.insemble.co.jp/service/dx-sapporo)
- [サイトマップ](https://www.insemble.co.jp/sitemap)
- [お問い合わせ](https://www.insemble.co.jp/contact)
- Media / Blog
- [お知らせ・ブログ](https://www.insemble.co.jp/news)
- [ロカプレ！（ローカルビジネス応援メディア）](https://loca-play.jp/)
Menu
1. [トップ](https://www.insemble.co.jp/)
2. ›
3. [お知らせ・ブログ](https://www.insemble.co.jp/news)
4. ›
5. 両端チラ見せのずらしスライダーをSplideでつくる！SlickのcenterModeをやさしく再現
ブログ
# 両端チラ見せのずらしスライダーをSplideでつくる！SlickのcenterModeをやさしく再現
Splideを使ってSlickのcenterModeを再現する方法を解説。軽量で初心者に優しいライブラリの魅力と具体的な実装例を紹介します。
In インセンブル編集部
公開 **2026.02.02**
Share
[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をコピー
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
この記事を書いた人
インセンブル編集部
株式会社インセンブル（札幌）は、中小企業のWeb運用・マーケティング・kintone導入を支援しています。2014年の創業から12年、64社の制作・運用を手がけ、現在14社のサイトを継続保守中。実務で分かったことを記事にしています。
[会社概要 →](https://www.insemble.co.jp/company) [無料のIT相談 →](https://www.insemble.co.jp/consultation)
次に読む
[ 2026.09.11 札幌のホームページ制作会社の選び方｜比較すべき5つのポイント](https://www.insemble.co.jp/news/sapporo-web-company-how-to-choose)[ 2026.09.10 ホームページ保守会社を乗り換える前に確認すべきこと｜「蓋を開けたら愕然」となりやすい5つの落とし穴](https://www.insemble.co.jp/news/website-maintenance-vendor-switch)
この記事をシェア
[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)
[← お知らせ・ブログ一覧へ](https://www.insemble.co.jp/news)
目次
閉じる ▲
無料診断
保守会社
乗り換えリスク診断（1分）
5つの質問に答えるだけ。見えていないリスクをチェックできます。
[診断する →](https://www.insemble.co.jp/diagnosis/maintenance-checklist)
Categories
- [すべて](https://www.insemble.co.jp/news)
- [お知らせ （39件）](https://www.insemble.co.jp/news/tag/お知らせ)
- [ブログ （26件）](https://www.insemble.co.jp/news/tag/ブログ)
- [制作事例 （21件）](https://www.insemble.co.jp/news/tag/制作事例)
- [制作会社選び （3件）](https://www.insemble.co.jp/news/tag/制作会社選び)
- [時事トピック （2件）](https://www.insemble.co.jp/news/tag/時事トピック)
Recent Posts
- 2026.09.11 [札幌のホームページ制作会社の選び方｜比較すべき5つのポイント](https://www.insemble.co.jp/news/sapporo-web-company-how-to-choose)
- 2026.09.10 [ホームページ保守会社を乗り換える前に確認すべきこと｜「蓋を開けたら愕然」となりやすい5つの落とし穴](https://www.insemble.co.jp/news/website-maintenance-vendor-switch)
- 2026.09.02 [小規模事業者持続化補助金でホームページ制作費は補助される？条件と注意点](https://www.insemble.co.jp/news/subsidy-jizokuka-homepage)
- 2026.08.26 [Google検索がAIモード中心に刷新｜中小企業のホームページが今すべきこと](https://www.insemble.co.jp/news/google-io-2026-ai-search-update)
- 2026.07.30 [自社ドメイン（独自ドメイン）に無料でブログを追加した実例【microCMS×GitHub Actions】](https://www.insemble.co.jp/news/own-domain-blog-microcms-github-actions)
Event
地域クラウド交流会
札幌大会
サイボウズ株式会社主催。地域の起業家・経営者が集まる発表・交流イベントを2017年から主催しています。2026年6月に第14回を開催しました。
[過去の開催レポートを見る →](https://chiiki-cloud.cybozu.co.jp/)
Media
[ 北海道のローカルビジネス・スモールビジネスの経営者を応援する情報メディアです。こちらもぜひご覧ください。 経営のヒントを読む](https://loca-play.jp/)
?
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)
Service
- [サービス一覧](https://www.insemble.co.jp/service)
- [ホームページ制作](https://www.insemble.co.jp/service/website-sapporo)
- [Webサイトのリニューアル](https://www.insemble.co.jp/service/renewal)
- [Webサイトの運営支援](https://www.insemble.co.jp/service/maintenance)
- [ECサイト制作・Shopify導入](https://www.insemble.co.jp/service/shopify)
- [MovableType.net導入](https://www.insemble.co.jp/service/movabletype-net)
- [らくっとホームページ](https://www.insemble.co.jp/rakutto-hp)
- [Webマーケティング支援](https://www.insemble.co.jp/service/web-marketing)
- [SEO対策](https://www.insemble.co.jp/service/seo)
- [アクセス解析](https://www.insemble.co.jp/service/traffic-analysis)
- [kintone導入・カスタマイズ](https://www.insemble.co.jp/service/kintone)
- [無料のIT相談](https://www.insemble.co.jp/consultation)
Works
- [サポートの実績](https://www.insemble.co.jp/works/support)
- [Web制作実績](https://www.insemble.co.jp/works)
- [お客様インタビュー](https://www.insemble.co.jp/interview/sapporo-romantei)
Media
- [お知らせ・ブログ](https://www.insemble.co.jp/news)
- [ロカプレ！](https://loca-play.jp/)
Company
- [会社概要](https://www.insemble.co.jp/company)
- [お知らせ・ブログ](https://www.insemble.co.jp/news)
- [DX宣言書](https://www.insemble.co.jp/dx-declaration)
- [プライバシーポリシー](https://www.insemble.co.jp/privacy)
- [サイトマップ](https://www.insemble.co.jp/sitemap)
© 2014 Insemble Co.,Ltd. [Privacy Policy](https://www.insemble.co.jp/privacy)
```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
} ]
}
```
