はじめに

ホームページ制作をする上で、トップページのファーストビューの重要性は高く、「3秒以内に何のサイトか伝わるか」なんて言われてたりします。
なぜ重要性は高いかというと、第一印象でほぼ決まるからです。
実際、閲覧者はかなり早く判断します。このサイトは大丈夫そうか、見やすいか、欲しい情報がありそうか、古くないか信頼できるかなどを。
これらに当てはまると、サイトから離れていくと思っていいでしょう。

そこで、ファーストビューにスライダーを設置するサイトは多く、そのスライダーの定番ライブラリとして、今でもかなり使われているのが「Swiper」です。個人的にもよく使ってます。

特にWordPress案件やコーポレートサイトでは、

• メインビジュアル
• ギャラリー
• サムネイル付きスライダー
• カルーセル
• モーダル連携

など、実装する機会がかなり多いです。

この記事では、実務でよく使うSwiper実装をまとめます。

Swiperとは？

Swiperは、モバイル対応に強いJavaScriptスライダーライブラリです。
特徴は、

• レスポンシブ対応がしやすい
• タッチ操作対応
• オプションが豊富
• WordPress案件でも導入しやすい

など。

Swiper公式サイト

CDNで読み込む方法

まずはCDNで導入。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

基本のSwiper

HTML

<div class="swiper sample-slider">
　<div class="swiper-wrapper">
　<div class="swiper-slide">Slide1</div>
　<div class="swiper-slide">Slide2</div>
　<div class="swiper-slide">Slide3</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('.sample-slider', {
　loop: true,
　pagination: {
　　el: '.swiper-pagination',
　　clickable: true,
　},
　navigation: {
　　nextEl: '.swiper-button-next',
　　prevEl: '.swiper-button-prev',
　},
});

レスポンシブ対応

実務でかなり使うのが breakpoints

const swiper = new Swiper('.sample-slider', {
　slidesPerView: 1,
　spaceBetween: 20,
　breakpoints: {
　　768: {
　　　slidesPerView: 2,
　　},
　　1024: {
　　　slidesPerView: 3,
　　},
　},
});

自動再生（autoplay）

const swiper = new Swiper('.sample-slider', {
　loop: true,
　autoplay: {
　　delay: 3000,
　　disableOnInteraction: false,
　},
});

フェード切り替え

トップページのファーストビューでよく採用されるレイアウトでよく使う構成。

const swiper = new Swiper('.sample-slider', {
　loop: true,
　effect: 'fade',
　fadeEffect: {
　　crossFade: true,
　},
　autoplay: {
　　delay: 4000,
　},
});

サムネイル付きSwiper

かなり実務で使います。

HTML

<div class="swiper gallery-main">
　<div class="swiper-wrapper">
　　<div class="swiper-slide">
　　　<img src="img1.jpg" alt="">
　　</div>
　</div>
</div>

<div class="swiper gallery-thumb">
　<div class="swiper-wrapper">
　　<div class="swiper-slide">
　　　<img src="thumb1.jpg" alt="">
　　</div>
　</div>
</div>

JavaScript

const thumbSwiper = new Swiper('.gallery-thumb', {
　slidesPerView: 4,
　spaceBetween: 10,
　watchSlidesProgress: true,
});
const mainSwiper = new Swiper('.gallery-main', {
　loop: true,
　thumbs: {
　　swiper: thumbSwiper,
　},
});

サムネイルを2段にする方法

案件で地味によくあります。

const swiperThumbnail = new Swiper(".slider-thumbnail", {
　breakpoints: {
　　0: {
　　　slidesPerView: 4,
　　　grid: {
　　　　rows: 4,
　　　　fill: 'row'
　　　}
　　},
　　768: {
　　　slidesPerView: 8,
　　　grid: {
　　　　rows: 2,
　　　　fill: 'row'
　　　}
　　}
　}
});

よくある詰まりポイント

loopが効かない

原因として多いのは、

• スライド数不足
• CSS崩れ
• display:none状態で初期化

など。

高さが崩れる

画像ロード前に初期化されるケース。

window.addEventListener('load', function () {
　const swiper = new Swiper('.sample-slider', {
　　〜
　});
});

で解決することがあります。

WordPress案件での注意

遅延読み込みとの競合

最近のWordPressテーマや高速化プラグインでは、画像の遅延読み込み（Lazy Load）が標準で有効になっていることが多くあります。
例えば、 WordPress標準のLazy Load、LiteSpeed Cache、WP Rocket、Autoptimizeなどがあります。

よくあるのがトップページのメインビジュアルです。本来ならページ表示時に画像が読み込まれるはずですが、

<img loading="lazy">

が自動付与されることで、
Swiperの初期化時に画像サイズが取得できず、

• 高さが0になる
• 一瞬崩れる
• スライダーがチラつく

ことがあります。

実務でおすすめの構成

個人的によく使うのは、

• loop
• autoplay
• breakpoints
• navigation
• pagination

を基本セットにする構成。

const swiper = new Swiper('.sample-slider', {
　loop: true,
　speed: 800,
　autoplay: {
　　delay: 4000,
　　disableOnInteraction: false,
　},
　slidesPerView: 1,
　spaceBetween: 20,
　pagination: {
　　el: '.swiper-pagination',
　　clickable: true,
　},
　navigation: {
　　nextEl: '.swiper-button-next',
　　prevEl: '.swiper-button-prev',
　},
　breakpoints: {
　　768: {
　　　slidesPerView: 2,
　　},
　　1024: {
　　　slidesPerView: 3,
　　},
　},
});

まとめ

Swiperは、

• WordPress
• コーポレートサイト
• LP
• 採用サイト

など、かなり幅広く使えるライブラリです。
特に実務では、

• レスポンシブ
• サムネイル
• grid
• fade
• loop
• LazyLoad対策

あたりを使う機会が多いです。