Web制作で、ほぼ毎回のように要望があるのが画像スライダーです。スライダーのライブラリはたくさんありますが、この記事では実務で使う機会の多いSwiper、Slick（Slick Slider）、VEGAS（VEGAS2）の3つを比べます。
3つとも長く使われているライブラリですが、ここ1年でそれぞれ大きな更新がありました。
- Swiper：2026年6月にv14が公開。TypeScriptで作り直され、対応ブラウザが新しいものに絞られた
- Slick：長く止まっていた開発が再開し、2026年9月にv2.0.0がnpmに公開。jQuery 4に対応した
- VEGAS：2026年2月にv3.0.0が公開され、jQueryなしで使えるようになった
この記事では、これらの変更を踏まえて、どれをどんな場面で使えばいいかと、最新版でそのまま動くコードをまとめます。
この記事の内容は、2026年10月時点のSwiper 14.3.0、Slick 2.0.0、VEGAS 3.0.0、jQuery 4.0.0をもとにしています。バージョンと変更点は、各ライブラリの公式リポジトリとnpmで確認しました。
先に結論：用途別の選び方
| やりたいこと | おすすめ |
|---|---|
| スマホで指で流すようなスライド（慣性スクロール）、カード型のカルーセル | Swiper |
| jQueryを使っているサイトで、手早く普通のスライダーを入れたい | Slick |
| ファーストビューの背景画像を、ズームしながら切り替えたい | VEGAS |
| これから新しく作るサイトで、jQueryを使いたくない | Swiper（背景のズームならVEGAS v3） |
迷ったらSwiperを選べば、たいていの要望には応えられます。SlickはjQueryを前提にしたサイトで、VEGASはファーストビューの背景専用と考えると選びやすいです。
3つの比較表
| 項目 | Swiper | Slick | VEGAS |
|---|---|---|---|
| 最新版（2026年10月） | 14.3.0 | 2.0.0 | 3.0.0 |
| jQuery | 不要 | 必要 | 不要（v3から） |
| 得意な動き | 慣性スライド、カルーセル、3D効果 | 標準的なスライド・フェード | 背景画像のズーム＋フェード |
| ファイルサイズ（gzip後） | 約43KB（全機能入りのbundle版） | 約10KB＋jQuery約27KB | 約3KB |
| 対応ブラウザ | 比較的新しいブラウザのみ（v14） | 幅広い | 幅広い |
| 更新状況 | 活発 | 2024年ごろから再開 | 2026年にv3 |
ファイルサイズは、npmで配布されている最小化済みファイルをgzipで圧縮して測った値です。Slickは単体だと小さいものの、jQueryを読み込んでいないサイトではjQueryのぶんが上乗せされます。Swiperも、npmで入れて使う機能だけを読み込めば、本体は約20KBまで減らせます。
Swiperの特徴
向いている場面
- スマホで、メニューやカードを指で流すように動かしたいとき（
freeMode） - 画面幅によって、1枚表示と複数枚表示を切り替えたいとき（
breakpoints） - カバーフローやキューブなど、凝った切り替え効果を使いたいとき
いちばん気に入っているのはfreeModeです。スライドが1枚ずつ止まらず、指を離したあとも勢いでスーッと流れるので、スマホのナビゲーションやカードの一覧と相性がよく、実務でもよく使っています。
注意したいこと
- v14から、対応ブラウザがChrome / Edge 110以降、Safari 16.4以降（iOS 16.4以降）、Firefox 110以降になりました。それより古いブラウザに対応する必要がある案件では、公式の案内どおりv12を使います
- オプションがとても多く、全部は覚えきれません。公式のデモからやりたい動きに近いものを探し、そのコードを元にするのが早いです
- 公式ドキュメントは英語のみです
なお、v12からv14への更新は、公式によるとコードの変更なしでできます（v13は欠番です）。
| 公式 | URL |
|---|---|
| 公式サイト | https://swiperjs.com/ |
| デモ | https://swiperjs.com/demos |
| GitHub | https://github.com/nolimits4web/swiper |
Slick（Slick Slider）の特徴
向いている場面
- すでにjQueryを使っているサイト（WordPressのテーマなど）に、普通のスライダーを入れたいとき
- 設定を
true/falseと数値で書くだけで済ませたいとき
コードがシンプルで、ネット上の情報も非常に多いのがSlickの強みです。「止まらずに流れ続けるスライダー」のような、公式のデモにない動きも、検索すると作り方がたくさん見つかります。
2.0でjQuery 4に対応した
Slickは2018年ごろから長く更新が止まっていましたが、2024年ごろから開発が再開し、2026年9月にv2.0.0がnpmに公開されました。公式のREADMEには「Version 2.0 is compatible with jQuery 4」とあります。
これは大事な変更です。2026年1月に公開されたjQuery 4では、古い関数がいくつか削除されました。1.8.1のソースコードは、そのうちの$.type()を初期化の処理の中で使っているため、jQuery 4と組み合わせると、初期化の時点でエラーになり、スライダーが動きません。2.0.0では、これらが標準のJavaScriptの書き方（Array.isArray()など）に置き換えられています。
| 使っているjQuery | Slickのバージョン |
|---|---|
| jQuery 4 | 2.0.0 |
| jQuery 3以前 | 公式のREADMEでは1.8.1を案内 |
注意したいこと
- jQueryが必須です。jQueryを使っていないサイトに入れると、jQueryのぶんだけ読み込みが増えます
- 初期化すると
divが何重にも自動で追加されるため、開発者ツールで構造を見ながらCSSを当てる必要があります - スライドを
ul/liで書くと、自動で追加される要素とぶつかってレイアウトが崩れることがあります。スライドはdivで書いておくのが無難です
| 公式 | URL |
|---|---|
| 公式サイト・デモ | https://kenwheeler.github.io/slick/ |
| GitHub | https://github.com/kenwheeler/slick |
VEGAS（VEGAS2）の特徴
向いている場面
- ファーストビューの背景画像を、ゆっくりズームしながらフェードで切り替えたいとき
この動きは、SwiperやSlickだけで作ろうとすると意外と手間がかかります。CSSの@keyframesでも作れますが、枚数によって切り替えの秒数の計算が変わるなど、慣れないと難しいところです。VEGASなら、オプションを数行書くだけで実装できます。
HTMLは空のdivを1つ置くだけで、画像の追加・削除はJavaScriptの配列を書き換えるだけなので、管理も楽です。切り替え効果の動きを1つずつ試せる公式のデモページも、とても分かりやすいです。
注意したいこと
- 背景のスライドショー専用です。カルーセルのような使い方には向きません
- 大きな画像を何枚も読み込むため、ファーストビューの表示が遅くなりがちです。画像は必ず圧縮しましょう
- 日本語の情報は多くありません
2026年2月のv3.0.0からjQueryが不要になりました。v2の書き方で使えるjQuery版も同梱されています。詳しい使い方は、VEGASの記事にまとめています。
| 公式 | URL |
|---|---|
| 公式サイト | https://vegas.jaysalvat.com/ |
| 切り替え効果のデモ | https://vegas.jaysalvat.com/documentation/transitions/ |
| GitHub | https://github.com/jaysalvat/vegas |
コピペで動くコード（最新版）
まずは動かしてみるのがいちばんの近道です。下のコードをHTMLファイルとして保存し、同じ階層にimgフォルダを作って画像を置けば、そのまま動きます。
Swiper 14（慣性スライド）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Swiper</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.css">
<style>
body { margin: 0; }
.swiper-slide { width: 70%; }
.swiper-slide img { display: block; width: 100%; }
</style>
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/slide01.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/slide02.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/slide03.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/slide04.jpg" alt=""></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@14/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
slidesPerView: 'auto',
spaceBetween: 16,
freeMode: true
});
</script>
</body>
</html>swiper-bundleは全機能入りの版なので、freeModeもそのまま使えます。npmで入れて使う場合は、import { FreeMode } from 'swiper/modules'のように、使う機能を自分で読み込みます。
Slick 2.0（jQuery 4）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Slick</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick-theme.css">
<style>
body { margin: 0; }
.slider img { display: block; width: 100%; }
</style>
</head>
<body>
<div class="slider">
<div><img src="img/slide01.jpg" alt=""></div>
<div><img src="img/slide02.jpg" alt=""></div>
<div><img src="img/slide03.jpg" alt=""></div>
<div><img src="img/slide04.jpg" alt=""></div>
</div>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick.min.js"></script>
<script>
jQuery(function ($) {
$('.slider').slick({
dots: true,
autoplay: true,
autoplaySpeed: 4000
});
});
</script>
</body>
</html>jQueryを先に、Slickをあとに読み込みます。順番が逆だとslick is not a functionというエラーになります。
VEGAS 3（背景画像のズーム）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>VEGAS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vegas@3.0.0/dist/vegas.min.css">
<style>
body { margin: 0; }
#mainvisual { height: 100vh; }
</style>
</head>
<body>
<div id="mainvisual"></div>
<script src="https://cdn.jsdelivr.net/npm/vegas@3.0.0/dist/vegas.iife.min.js"></script>
<script>
vegas('#mainvisual', {
slides: [
{ src: 'img/zoom01.jpg' },
{ src: 'img/zoom02.jpg' },
{ src: 'img/zoom03.jpg' }
],
transition: 'fade',
transitionDuration: 4000,
delay: 18000,
animation: 'kenburns',
animationDuration: 20000
});
</script>
</body>
</html>jQueryを使う書き方や、スマホで画像を切り替える方法は VEGASの記事を参照してください。
実務での使い分けの例
これまでのコーポレートサイトや店舗サイトの制作で、実際にどう使い分けてきたかを紹介します。
Swiper：スマホだけ慣性スライドにする
スマホではメニューやサービスの一覧を横に流し、パソコンでは普通に並べる、という使い方をよくします。逆に、スマホでは1枚ずつ止まる普通のスライダーにして、パソコンでは慣性スライドにするパターンもあります。下はその後者の例です。
const swiper = new Swiper('.business .swiper', {
// スマホ：1枚ずつ止まる、前後のスライドが少し見える
loop: true,
slidesPerView: 1.3,
spaceBetween: 16,
centeredSlides: true,
pagination: {
el: '.swiper-pagination',
clickable: true
},
breakpoints: {
// 768px以上：慣性スライド
768: {
loop: false,
centeredSlides: false,
slidesPerView: 'auto',
spaceBetween: 32,
grabCursor: true,
freeMode: {
enabled: true,
momentum: true
}
}
}
});breakpointsのキーは「その幅以上」のときに使う設定です。スマホの設定を先に書き、広い画面の設定をbreakpointsに書くと考えると分かりやすいです。
Slick：ファーストビューのフェードと、サムネイルとの連動
店舗サイトのファーストビューで、スライドではなくフェードで切り替え、下に並べたサムネイルにマウスを乗せると、その画像に切り替わるようにした例です。
jQuery(function ($) {
const $slider = $('.gallery__slider');
$slider.slick({
fade: true,
speed: 500,
arrows: false,
dots: false,
autoplay: false,
cssEase: 'linear'
});
// サムネイルにマウスを乗せたら、同じ番号のスライドに切り替える
$('.gallery__thumb').on('mouseenter', function () {
$slider.slick('slickGoTo', $(this).index());
});
});slickGoToは、指定した番号のスライドに移動するメソッドです。サムネイルの並び順とスライドの並び順をそろえておけば、index()で番号を取るだけで連動できます。
VEGAS：ファーストビューの背景
イベントサイトや住宅会社のサイトのファーストビューで、背景画像をゆっくりズームしながら切り替えるのに使いました。写真の雰囲気を伝えたいサイトでは、スライダーよりも印象に残りやすい演出です。
WordPressのテーマで使うときの注意
WordPressにはjQueryが同梱されていて、多くのテーマやプラグインがそれを使っています。自分で別のjQueryを読み込むと二重読み込みになり、ほかのプラグインが動かなくなることがあります。
- SlickやVEGASのjQuery版を使うときは、
wp_enqueue_script()の依存関係に'jquery'を指定し、WordPressのjQueryを使う - そのjQueryのバージョンは、ページのソースの
jquery.min.js?ver=の部分で確認できる。jQuery 4ならSlick 2.0、jQuery 3ならSlick 1.8.1を選ぶ - jQueryを使いたくない場合は、SwiperかVEGAS v3のjQueryなしの書き方を選ぶ
// functions.php（Slick 2.0 の例）
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick.css', [], '2.0.0' );
wp_enqueue_script( 'slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@2.0.0/slick/slick.min.js', [ 'jquery' ], '2.0.0', true );
} );まとめ
- 迷ったらSwiper。jQuery不要で、慣性スライドやカルーセルに強い。v14は対応ブラウザが新しいものだけになった
- jQueryを使っているサイトで手早く入れるならSlick。jQuery 4を使うなら2.0.0を選ぶ（1.8.1はjQuery 4では初期化でエラーになる）
- ファーストビューの背景をズームしながら切り替えるならVEGAS。v3からjQuery不要
- WordPressでは、jQueryを二重に読み込まないよう、テーマの読み込み方に合わせる
それぞれの詳しい使い方は、個別の記事にまとめています。