スライダー／カルーセルジェネレーターとは、Swiper・Splide・Slickの3つの人気ライブラリから1つを選び、画面上で設定するだけで、スライダーやカルーセルのコピペできるコード（CDN読み込み＋HTML＋初期化JS）を出力してくれる無料ツールです。表示枚数・エフェクト・自動再生・サムネイル連動・レスポンシブまで、コードを書かずに調整できます。
スライダーを実装するとき、つまずくのは「どのライブラリを選ぶか」と「オプションの書き方」です。Swiper・Splide・Slickはそれぞれ記法が違い、公式ドキュメントを読みながらオプション名を調べ、HTMLの構造を合わせ、初期化スクリプトを書く——という作業を毎回くり返すことになります。レスポンシブで「PCは3枚・スマホは1枚」のように出し分けようとすると、さらにbreakpointsの書き方で手が止まります。
この記事では、CodeQuestが公開しているスライダー／カルーセルジェネレーターの使い方を解説します。3ライブラリの選び方、共通設定とライブラリ固有オプションの調整、無限スクロールやサムネイル連動といったパターン別のコード出力までを、実際の操作に沿って紹介します。ブラウザだけで完結し、登録は不要、生成したコードは商用サイトでもそのまま使えます。
このツールでできること
スライダー／カルーセルジェネレーターは、ライブラリの記法を覚えなくても動くスライダーのコードを手に入れることに特化しています。主な機能は次のとおりです。
| 機能 | 内容 |
|---|---|
| 3ライブラリ対応 | Swiper v12／Splide v4／Slick をタブで切り替え。同じ設定を、選んだライブラリ用のコードに変換して出力 |
| レスポンシブ表示枚数 | PCとスマホ（768px以下）で別々の表示枚数を指定でき、出し分けるコードを自動生成 |
| 多彩なエフェクト | スライド／フェード／カバーフロー／キューブ／フリップ／カード／無限スクロール（マーキー） |
| 自動再生 | 再生間隔と「ホバーで一時停止」を設定 |
| ナビゲーション | 矢印・ページネーション（ドット）の有無を切り替え |
| サムネイル連動ギャラリー | メイン＋サムネイルが連動する2連スライダーのコードを生成 |
| 細かい挙動 | ループ／中央寄せ／縦方向／ドラッグ／マウスホイール／キーボード操作など |
| コピペ出力 | CDN読み込み＋HTML＋初期化JSの3点セットを、自己完結したコードとして出力 |
画像やデータをサーバーに送信せず、すべてブラウザ内で処理します。出力されるのはサンプル画像入りの完成コードなので、画像のURLを差し替えればそのまま動きます。
Swiper・Splide・Slick の選び方
このツールの一番の特徴は、3つの主要ライブラリを同じ操作で切り替えながら比較できる点です。まずは、どれを選べばいいかの結論から整理します。
結論として、特に理由がなければ Swiper を選べば間違いありません。多機能で利用実績が多く、3D系のエフェクトまで揃っています。ページの軽さやアクセシビリティを重視するなら Splide、既存案件の保守でどうしても必要なときだけ Slick、という判断になります。
| 項目 | Swiper | Splide | Slick |
|---|---|---|---|
| jQuery依存 | 不要 | 不要 | 必須 |
| 特徴 | 多機能・定番。3D系エフェクトも対応 | 軽量・国産。アクセシビリティに配慮 | 古株。シンプルだが設計が古い |
| エフェクト | スライド／フェード／カバーフロー／キューブ／フリップ／カード | スライド／フェード | スライド／フェード |
| メンテナンス | 活発 | 活発 | ほぼ停止 |
| 新規におすすめ | ◎ 迷ったらこれ | ◎ 軽さ重視なら | △ 保守用途のみ |
Slickは長く使われてきたライブラリですが、最終リリースは2017年の v1.8.1 で、その後ほとんど更新されていません（GitHubのリリース履歴）。jQueryへの依存もあるため、新規実装でわざわざ選ぶ理由は基本的にありません。各ライブラリの詳細は Swiper公式・Splide公式 も参考になります。
使い方：3ステップでコードを作る
操作はおおきく3ステップです。難しい設定はありません。
- ライブラリを選ぶ： 上部のタブで Swiper・Splide・Slick のいずれかを選びます。あとから切り替えれば、同じ設定のまま別ライブラリのコードに変換されるので、見比べながら決められます。
- スライダーを設定する： 表示枚数・余白・エフェクト・自動再生・矢印やドットの有無などを、プレビューを見ながら調整します。PCとスマホで表示枚数を変えれば、レスポンシブ対応のコードが自動で組み込まれます。
- コードをコピーする： 下部に生成されたコードをコピーボタンで取得し、貼り付けます。出力はCDN読み込み・HTML・初期化スクリプトがひと続きになっているので、画像のURLを差し替えるだけで動きます。
たとえばSplideで基本的な1枚表示・ループのスライダーを作ると、次のようなコードが出力されます。<head>にCSS、本文にHTML、</body>直前にJSという3ブロック構成です。
<!-- 1. <head> に読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" />
<!-- 2. HTML -->
<div class="splide my-slider">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="1.jpg" alt="スライド1" /></li>
<li class="splide__slide"><img src="2.jpg" alt="スライド2" /></li>
<li class="splide__slide"><img src="3.jpg" alt="スライド3" /></li>
</ul>
</div>
</div>
<!-- 3. </body> 直前に読み込み＆初期化 -->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<script>
new Splide('.my-slider', {
type: 'loop',
speed: 500
}).mount();
</script>Splideは矢印やページネーションを自動で描画するため、上のHTMLだけで完成します。プレビューのスマホ・PC幅を切り替えて、表示崩れがないかをその場で確認できます。
調整できるパラメータ一覧
設定項目は、3ライブラリに共通するものと、各ライブラリ固有のものに分かれています。共通項目を動かすと、選んでいるライブラリの記法に合わせて自動的に変換されます。
| 共通パラメータ | 役割 |
|---|---|
| スライド枚数 | プレビューと出力コードに反映される画像の枚数 |
| PC／スマホ表示枚数 | 一度に見せる枚数。768pxを境に出し分け（レスポンシブ） |
| 余白（gap） | スライド間のすき間（px） |
| 遷移速度 | 切り替わりにかかる時間（ms） |
| エフェクト | スライド／フェード／カバーフロー等の切り替え方 |
| 方向 | 横方向／縦方向 |
| ループ・中央寄せ | 端まで来たら先頭へ戻すか、中央のスライドを強調するか |
| 自動再生・間隔 | 一定時間で自動送り。ホバーで一時停止も指定可 |
| 矢印・ページネーション | 前後ボタンとドットの表示有無 |
| サムネイル連動 | メイン＋サムネイルの2連スライダーにする |
さらに、ライブラリごとに固有のオプションも用意されています。共通設定だけでは届かない細かな挙動は、こちらで詰めます。
| ライブラリ | 固有パラメータ |
|---|---|
| Swiper | grabCursor（つかむカーソル）／mousewheel（ホイール操作）／keyboard（キー操作） |
| Splide | rewind（末尾→先頭へ戻す）／dragFree（自由ドラッグ） |
| Slick | adaptiveHeight（高さ自動調整）／centerPadding（中央寄せ時の見切れ幅） |
エフェクトの種類と使いどころ
切り替え方（エフェクト）は印象を大きく左右します。用意されているエフェクトと向いている場面は次のとおりです。なお3D系のカバーフロー・キューブ・フリップ・カードはSwiper専用です。
| エフェクト | 動き | 対応ライブラリ |
|---|---|---|
| スライド | 横（縦）に滑る基本動作 | すべて |
| フェード | 重ねてふわっと切り替え。1枚表示向き | すべて |
| カバーフロー | 奥行きのある3D的な並び | Swiper |
| キューブ | 立方体が回転して切り替わる | Swiper |
| フリップ | カードをめくるように反転 | Swiper |
| カード | 重なったカードを1枚ずつめくる | Swiper |
| 無限スクロール | 止まらず等速で流し続ける。ロゴ帯やお知らせ向き | すべて（Splideは拡張） |
「無限スクロール（マーキー）」は、ロゴの帯やニュースティッカーのように、止まらずに流し続けたいときに便利です。Swiperで無限スクロールを選ぶと、次のような等速ループのコードが出力されます。
<!-- 1. <head> に読み込み -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<style>
/* 無限スクロールは等速で流す */
.my-slider .swiper-wrapper { transition-timing-function: linear !important; }
</style>
<!-- 2. HTML -->
<div class="swiper my-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="logo1.svg" alt="ロゴ1" /></div>
<div class="swiper-slide"><img src="logo2.svg" alt="ロゴ2" /></div>
<!-- 画像を必要な数だけ並べる -->
</div>
</div>
<!-- 3. </body> 直前に読み込み＆初期化 -->
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<script>
new Swiper('.my-slider', {
slidesPerView: 4,
spaceBetween: 16,
loop: true,
speed: 4000,
allowTouchMove: false,
autoplay: { delay: 0, disableOnInteraction: false },
});
</script>autoplayのdelayを0にし、transition-timing-functionをlinearにすることで、カクつかず一定速度で流れ続けます。流れる速さは「遷移速度」スライダーに連動します。
レスポンシブ対応の仕組み
「PCでは複数枚、スマホでは1枚」のように画面幅で表示枚数を変えたい——スライダーで最もつまずくのがこのレスポンシブ対応です。このツールでは、PC表示枚数とスマホ表示枚数を別々に指定するだけで、出し分けるコードが自動で組み込まれます。
内部的にはスマホ（モバイル）を基準にして、768px以上でPC用の枚数に切り替える形でコードが生成されます。Swiperならbreakpoints、Splideならbreakpoints、Slickならresponsiveと、ライブラリごとに記法は違いますが、ツール側が適切なキーに変換してくれます。
たとえばSwiperでPC3枚・スマホ1枚にすると、初期化オプションにslidesPerView: 1とbreakpoints: { 768: { slidesPerView: 3 } }が入った状態で出力されます。どのブレイクポイントで何枚にするかを自分で調べる必要がありません。
サムネイル連動ギャラリーの作り方
商品ギャラリーのように「大きなメイン画像＋下のサムネイルをクリックで切り替え」というUIも、チェックひとつで生成できます。「サムネイル連動」をオンにすると、メインとサムネイルの2つのスライダーを連動させるコードが出力されます。
Swiperの場合、サムネイル側を先に作り、メイン側のthumbsオプションに渡すことで連動します。出力される初期化部分は次のような形です。
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<script>
// サムネイル側を先に初期化
const thumbs = new Swiper('.thumb-slider', {
spaceBetween: 8,
slidesPerView: 4,
freeMode: true,
watchSlidesProgress: true,
});
// メイン側にサムネイルを連動させる
const main = new Swiper('.main-slider', {
spaceBetween: 8,
navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' },
thumbs: { swiper: thumbs },
});
</script>HTML側ではメイン用とサムネイル用の2つのスライダーが出力され、サムネイルをクリックするとメインが連動して切り替わります。SplideやSlickでも、それぞれの連動記法（syncやasNavFor）で同じUIのコードが得られます。
手書き実装・他の方法との使い分け
CodeQuestにはスライダー関連の実装記事がいくつかあります。ツールでさっとコードを作るか、仕組みから手で実装するかは、目的に合わせて選んでください。
| やりたいこと | 向いている方法 |
|---|---|
| ライブラリを選んで動くコードをすぐ手に入れたい | このツール |
| Swiperの構造やオプションを理解しながら手で実装したい | Swiper実装の解説記事 |
| スクロールに連動した凝ったスライダーアニメを作りたい | GSAP×Splideの実装記事 |
Swiperを手書きで実装して仕組みから理解したい場合は、Swiper.jsで作るメインビュースライダーの実装ガイド が近道です。HTML構造とオプションの意味を順番に解説しています。
スクロール量に合わせて動くような凝ったスライダーを作りたいなら、GSAP×Splide.jsで作るスクロール連動スライダー が参考になります。ライブラリの自動再生では出せない、スクロール主導の動きを扱います。
スライダーに組み合わせるホバーや表示アニメーションを足したいときは、CSS実装テクニック集 も合わせてどうぞ。
よくある失敗・注意点
スライダー実装でつまずきやすいポイントを3つにまとめます。
- Slickを新規案件で選んでしまう： SlickはjQuery依存で更新も止まっています。学習目的や既存案件の保守でなければ、新規はSwiperかSplideを選ぶのが無難です。
- 画像のサイズがバラバラでガタつく： 縦横比の違う画像を混ぜると、切り替わるたびに高さが変わってカクつきます。
img { width: 100%; height: auto; }で幅を揃えるか、高さを固定してobject-fit: cover;で切り抜くと安定します。 - CDNのバージョンを意識せず使う： 出力コードのCDNはバージョンを固定しています。メジャーバージョンが上がると記法が変わることがあるため、動作確認したバージョンのまま使うのが安全です。
よくある質問（FAQ）
Q. スライダージェネレーターは無料ですか？
はい。完全無料で、登録も透かしもありません。生成したコードはそのまま商用サイトでも利用できます。データはサーバーに送信されず、すべてブラウザ内で処理されます。
Q. Swiper・Splide・Slickのどれを選べばいいですか？
特に理由がなければSwiperが無難です。多機能で実績が多く、3D系エフェクトも揃っています。ページの軽さを重視するならSplide、既存案件の保守でどうしても必要なときだけSlick、という判断になります。
Q. jQueryは必要ですか？
SwiperとSplideはjQuery不要で、出力コードだけで動きます。Slickのみ、初期化にjQueryの読み込みが必要です。
Q. スマホで表示枚数を変えるレスポンシブ対応はできますか？
できます。PCとスマホで別々の表示枚数を指定すると、768pxを境に出し分けるコード（Swiper/Splideのbreakpoints、Slickのresponsive）が自動で組み込まれます。
Q. 画像はどうやって差し替えますか？
出力コードにはサンプル画像が入っています。HTML内の<img>のsrcを自分の画像URLに差し替え、枚数を必要なだけ増減すればそのまま動きます。
Q. 自動再生やサムネイル連動ギャラリーも作れますか？
どちらも対応しています。自動再生は間隔とホバー一時停止を設定でき、サムネイル連動はチェックひとつでメイン＋サムネの2連動スライダーのコードが出力されます。
まとめ
- スライダー／カルーセルジェネレーターは、Swiper・Splide・Slickの3ライブラリから選んで、コピペできるスライダーのコードを出力する無料ツール
- 同じ設定のままライブラリを切り替えて見比べられる。迷ったらSwiper、軽さ重視ならSplide、Slickは保守用途のみ
- 表示枚数・エフェクト・自動再生・レスポンシブ・サムネイル連動・無限スクロールまで、コードを書かずに調整できる
- 出力はCDN＋HTML＋初期化JSの3点セット。画像URLを差し替えればそのまま動き、商用利用も可能
ライブラリの記法を毎回調べる手間が、ライブラリを選んでスライダーを触るだけに変わります。まずはSwiperのまま、表示枚数とエフェクトを動かすところから試してみてください。
スライダーを組み込んだサイトを公開したあとは、検索エンジンに正しく見つけてもらう番です。CodeQuest.work SEOの無料診断で、サイトの構造化データや表示速度をチェックできます。
関連記事
Swiper.jsで作るメインビュースライダー｜レスポンシブ対応のシンプルな実装ガイド