目次
Swiperの実装からカスタマイズまで徹底解説
Webサイト制作において、スライダー（画像やコンテンツを切り替えて表示する機能）の実装は避けては通れないスキルの一つです。
特にポートフォリオサイトを作る際や、実務でクライアントワークを行う際によく求められる機能です。
しかしながらスライダーの実装は比較的つまづきやすいポイントでもあります。
この記事では、初学者でも実装できるSwiperの使い方を、実践的なコード例とともに解説していきます。
本記事のポイントは以下の3つです
- 初心者でも分かる！環境構築から丁寧に解説
- コピペでそのまま使える！実践的なコード例を提供
- ポートフォリオに使える！カスタマイズ例も紹介
必要な時にすぐ参照できるよう、ブックマークしておくと便利です
「環境構築って難しそう…」と思われがちですが、Swiperは非常にシンプルに導入できます。
Swiperの導入方法は主に3つあります。
- CDN（リンクを追加するだけの最も簡単な方法）
- npm（Node.jsプロジェクトでの導入）
- ダウンロード（ファイルをダウンロードして使用）
npmやダウンロードでの導入は以下の記事がおすすめです
npmは中級者以上向けです
Qiita
Swiper.jsをnpmでインストールして使ってみる。 – Qiita
現在勉強のために作っているWEBサービス（Laravel使用）に画像スライダーを実装したく、Swiper.jsというものが便利らしいので使ってみる。npmでインストールし、ググって良…
freefuntimes
Swiperスライダーをファイルをダウンロードする方法で実装してみる（備忘録）
今回はSwiperスライダーについて、CDN読み込みではなく、配布されているファイルをダウンロードして対応する方法について紹介していきたい。 公式ドキュメントはこちら 今…
この記事では、最も手軽に始められるCDNでの導入方法を紹介します。
Swiperの基本セットアップ
Swiperのインストールは非常にシンプルで、初心者の方でも簡単に行えます。
まず、Swiperをウェブサイトに追加するためには、HTMLファイルに、SwiperのCSSファイルとJavaScriptファイルへのリンクを追加する必要があります。
以下のリンクからSwiper公式の各種インストールページにアクセスしてください。
Swiper
Getting Started With Swiper
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
「Use Swiper from CDN」と書かれている場所を見つけてください。
CSSとJavaScriptの読み込み用のコードをコピーして、使いたいプロジェクトに貼り付けます。
HTMLファイルのheadタグとbodyタグ内に先程のコードをコピー&ペーストしてください
コピーした後のプロジェクトのは以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- swiper -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="css/style.css">
<title></title>
</head>
<body>
<main>
</main>
<!-- swiper -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>次に、スライダーを表示したい場所に以下のHTMLを追加します。
<div class="swiper">
<div class="swiper-wrapper">
<!-- スライド1 -->
<div class="swiper-slide">
<img src="https://picsum.photos/1920/1080" alt="スライド画像1">
</div>
<!-- スライド2 -->
<div class="swiper-slide">
<img src="https://picsum.photos/1920/1079" alt="スライド画像2">
</div>
<!-- スライド3 -->
<div class="swiper-slide">
<img src="https://picsum.photos/1920/1078" alt="スライド画像3">
</div>
</div>
<!-- ページネーション -->
<div class="swiper-pagination"></div>
<!-- ナビゲーションボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>次に、JavaScriptファイルに以下のコードを追加します
const swiper = new Swiper('.swiper', {
// ループ機能を有効化
loop: true,
// ページネーションの設定
pagination: {
el: '.swiper-pagination',
},
// ナビゲーションボタンの設定
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});最後にスライダーをキレイに表示するために、以下のCSSも追加しておきましょう。
.swiper img {
width: 100%;
height: auto;
object-fit: cover;
}これで基本的なスライダーの実装は完了です！
ここまでの作業で、ポートフォリオサイトでも使える基本的なスライダーが完成しました。
この基本実装をベースに、次のセクションで実践的なカスタマイズ方法を紹介していきます。
実践で使えるカスタマイズ例5選
現場でよく使われるスライダーのカスタマイズ例を5つ紹介します。
コードをコピー&ペーストするだけで、ポートフォリオや実務で使えるスライダーが実装できます。
① 複数枚表示スライダー
<div class="swiper multi-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/400/299"></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/300"></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/298"></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/299"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>.multi-swiper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.multi-swiper img {
width: 100%;
height: 200px;
object-fit: cover;
}const swiper = new Swiper(".multi-swiper", {
loop: true,
slidesPerView: 3,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.
② 自動再生スライダー
コーポレートサイトのメインビジュアルなどで定番のパターンです。
<div class="swiper auto-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/800/400"></div>
<div class="swiper-slide"><img src="https://picsum.photos/800/399"></div>
<div class="swiper-slide"><img src="https://picsum.photos/800/398"></div>
</div>
</div>.auto-swiper {
width: 100%;
max-width: 800px;
height: 400px;
margin: 0 auto;
}
.auto-swiper img {
width: 100%;
height: 100%;
object-fit: cover;
}const swiper = new Swiper('.auto-swiper', {
loop: true,
// 自動再生の設定
autoplay: {
delay: 3000, // 3秒ごとに切り替え
disableOnInteraction: false, // 操作後も自動再生を継続
},
// フェードエフェクト
effect: 'fade',
fadeEffect: {
crossFade: true
},
});See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.
③ サムネイル付きスライダー
写真ギャラリーやポートフォリオの作品紹介で重宝するパターンです。
<div class="swiper main-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/800/400"></div>
<div class="swiper-slide"><img src="https://picsum.photos/800/399"></div>
<div class="swiper-slide"><img src="https://picsum.photos/800/398"></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper thumb-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/400/300"></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/299"></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/298"></div>
</div>
</div>.main-swiper {
width: 100%;
max-width: 800px;
height: 400px;
margin: 0 auto 10px;
}
.main-swiper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumb-swiper {
width: 100%;
max-width: 800px;
height: 80px;
margin: 0 auto;
}
.thumb-swiper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.thumb-swiper .swiper-slide {
opacity: 0.4;
cursor: pointer;
}
.thumb-swiper .swiper-slide-thumb-active {
opacity: 1;
}window.addEventListener('DOMContentLoaded', function() {
// サムネイルスライダー
const thumb_swiper = new Swiper('.thumb-swiper', {
slidesPerView: 4,
watchSlidesVisibility: true,
watchSlidesProgress: true,
spaceBetween: 10,
});
// メインスライダー
const main_swiper = new Swiper('.main-swiper', {
loop: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: thumb_swiper,
},
});
});See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.
④ 無限ループスライダー
お知らせなど、コンテンツを流し続けたい場合に使用するパターンです。
<div class="swiper loop-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/400/250"></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/249"></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/248"></div>
<div class="swiper-slide"><img src="https://picsum.photos/400/247"></div>
</div>
</div>.loop-swiper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.loop-swiper img {
width: 100%;
height: 200px;
object-fit: cover;
}
.loop-swiper .swiper-wrapper {
transition-timing-function: linear;
}const swiper = new Swiper('.loop-swiper', {
loop: true,
slidesPerView: 3,
speed: 3000,
allowTouchMove: false,
autoplay: {
delay: 0,
},
});See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.
⑤ フェード効果スライダー
ポートフォリオサイトのメインビジュアルや、写真ギャラリーでインパクトを与えたい時に使用するパターンです。
<div class="swiper fade-swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/800/400"></div>
<div class="swiper-slide"><img src="https://picsum.photos/800/399"></div>
<div class="swiper-slide"><img src="https://picsum.photos/800/398"></div>
</div>
<div class="swiper-pagination"></div>
</div>.fade-swiper {
width: 100%;
max-width: 800px;
height: 400px;
margin: 0 auto;
}
.fade-swiper img {
width: 100%;
height: 100%;
object-fit: cover;
}const swiper = new Swiper('.fade-swiper', {
loop: true,
effect: 'fade',
fadeEffect: {
crossFade: true
},
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
speed: 1000,
pagination: {
el: '.swiper-pagination',
type: 'fraction', // 1/3のような表示形式
},
});See the Pen Untitled by ryoma (@hwjgdjpk-the-decoder) on CodePen.
さいごに
今回は、Web制作でよく使用されるSwiperの実装方法を紹介してきました。
Swiperは見た目に美しく、実装も比較的簡単なスライダーライブラリです。
今回紹介した5つのパターンは、ポートフォリオサイトや実務でもすぐに活用できますので、ぜひ実装してみてください。
Swiperの理解を深めたら、次は別のライブラリのスライダーも試してみることをお勧めします。また、アニメーションのカスタマイズにも挑戦してみてください。
関連記事
あわせて読みたい
3年間のWeb制作で経験したHTMLのつまづきポイント6選！現役コーダーが教える解決方法
3年間のWeb制作で経験したHTMLのつまづきポイント6選 Web制作でHTMLは基本中の基本ですが、意外とつまづきポイントが多いものです。 実際に苦戦している人の声をSNS等で...
あわせて読みたい
【徹底解説】現役エンジニアが教えるCursor完全活用ガイド2024｜AI時代の必須スキル
現役エンジニアが教えるCursor完全活用ガイド 毎日10時間以上コーディング作業をしている現役エンジニアとして、新しいコードエディタ「Cursor」の可能性に大きな期待を...
コメント