このページでは、Swiperライブラリを使用して、ウェブページ上でスライダー（カルーセル）を作成する方法が説明されています。基本的なセットアップ方法、オプション設定、カスタマイズ方法、および応用例が含まれています。スライダーを使用することで、画像やコンテンツを魅力的に表示するインタラクティブなユーザーインターフェースを構築できます。
読者Swiper様々なスライダーを実装は、最初にどこを理解するとよいですか？
木村対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
実装内容
実装内容では、【Swiper】 様々なスライダーを実装を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
パターン1 slide
パターン2 Fade
パターン3 CoverFlow
パターン4 無限スタイだー
GitHub
コードの詳細はこちらを参照にしてください。
GitHubで押さえたいポイント
GitHubは、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
GitHubの確認方法
ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。
ポイント解説
実際のWebサイトでは、同じページ内でスライドやフェードインといったアニメーションがよく使われています。これを同じライブラリを使って実装するのは少し難しいですが、以下のポイントを抑えることが大切と考えます。
Swiperのコード
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=1" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=2" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=3" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=4" alt=""></div>
<div class="swiper-slide"><img src="https://picsum.photos/1000/800?random=5" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>上記はSwiperのデフォルトのコード例です。ここで注目したいのが’mySwiper’クラスです。このクラス名は任意でどのようなクラス名を設定しても良いです。同じページにswiperを実装する場合は、このクラスをptn01,ptn02・・・等に変更し、それらを指定することでそれぞれを区別することができます。
使用例
以下は上記のアニメーションの指定例です。swiper ptn01等に設定し記述しています。
// パターン01
new Swiper(".ptn01", {
loop: true,
centeredSlides: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
768: {
slidesPerView: 1.5,
spaceBetween: 30,
},
},
});
// パターン02
new Swiper(".ptn02", {
loop: true,
effect: "fade",
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
// パターン03
new Swiper(".ptn03", {
loop: true,
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows: true,
},
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
768: {
slidesPerView: 2.2,
spaceBetween: 10,
},
},
});
// パターン04
new Swiper(".ptn04", {
spaceBetween: 10,
loop: true, // ループ有効
slidesPerView: 3, // 一度に表示する枚数
speed: 6000, // ループの時間
allowTouchMove: false, // スワイプ無効
autoplay: {
delay: 0, // 途切れなくループ
},
});実装前に確認しておきたいこと
ここでは、Swiper様々なスライダーを実装を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。
作業の目的と変更範囲を決める
対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。 サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。
元の状態へ戻せるようにする
テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。
よくあるつまずきと確認方法
Swiper様々なスライダーを実装が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。
変更が反映されない場合
保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。
公開前の最終確認
ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。
まとめ
- Swiperを同ページ内で実装する方法を解説
- 任意のクラス名を設定する
- クラス名が被らないように注意する
- Swiperには様々なオプションが準備されている
複数のSwiperを設置するときの考え方が参考になりました。それぞれ設定を変える場合は、クラス名と初期化処理を分ければ競合を避けられますか？
はい、スライダーごとに対象のクラスやdata属性を分け、それぞれの要素に対して初期化すれば設定の競合を避けやすくなります。同じidの重複は避け、複数設置する場合は各要素をループして初期化する方法も便利です。