画像スライダー（カルーセル）のコードを Swiper・Splide・Slick の3ライブラリで同時に生成。設定するだけで、コピペできるHTML/JSをライブプレビュー付きで出力します。
選択中のライブラリで実際の動きをプレビューしています。画像はサンプル（Unsplash）です。
サンプル画像（Unsplash）の <img src> をご自身の画像に置き換えてください。CDNの読み込みタグも含めて出力しています。
スライダー ジェネレーターは、画像スライダー（カルーセル）の実装コードを Swiper・Splide・Slick の3ライブラリで同時に生成できる無料ツールです。表示枚数・自動再生・フェードなどを設定すると、コピペできるHTML/JSをライブプレビュー付きで出力します。登録不要・透かしなしで、生成したコードは商用利用できます。
JavaScriptで画像スライダーを実装する代表的なライブラリが Swiper・Splide・Slick の3つです。それぞれ特徴が異なります。
| ライブラリ | jQuery | サイズ目安 | 保守状況 | 向いているケース |
|---|---|---|---|---|
| Swiper | 不要 | 約140KB | 活発に開発中 | 機能が豊富。迷ったらこれ。3D・サムネ連動など高度な演出にも対応 |
| Splide | 不要 | 約29KB（最軽量） | 健在（作者は日本人） | 軽さ・アクセシビリティ重視。日本語ドキュメントがあり導入しやすい |
| Slick | 必須 | 約42KB＋jQuery | 更新停止（非推奨） | 既存サイトの保守。新規ではSwiper/Splideへの移行を推奨 |
「この見た目のコードがすぐ欲しい」という定番パターンを、3ライブラリそろえて用意しました。微調整は上のジェネレーターでどうぞ。
<link> タグも含めて出力します。はい。完全無料で、登録も透かしもありません。生成したHTML/JSはそのまま商用利用できます。
新規ならjQuery不要で活発に開発されている Swiper、軽量・高アクセシビリティ・日本語ドキュメント重視なら Splide がおすすめです。SlickはjQuery必須で更新が停止しているため、新規採用は非推奨です。
はい。出力コードのサンプル画像（Unsplash）のURLを、ご自身の画像パスに置き換えるだけで使えます。
対応しています。エフェクトで「フェード」を選ぶと、各ライブラリのフェード設定込みのコードを生成します。フェード時は表示枚数が自動的に1枚に固定されます。
できます。「スマホ表示枚数（≤768px）」を設定すると、各ライブラリのブレークポイント設定を含むコードを生成します。
ほぼ同じ意味で使われます。複数の画像やコンテンツを横に並べて切り替えて見せるUIを、日本では「スライダー」、英語圏を中心に「カルーセル（carousel）」と呼びます。本ツールはどちらの呼び方でも同じカルーセル／スライダーのコードを生成します。
はい。「サムネイル付きギャラリー」をオンにすると、メイン画像と連動するサムネイル一覧付きのコードを生成します。Swiperは thumbs、Splideは sync、Slickは asNavFor で実装されます。
対応しています。Swiper選択時はカバーフロー・キューブ・フリップ・カードの3Dエフェクトを、3ライブラリ共通で無限スクロール（マーキー）を生成できます。