swiper の導入方法や書き方などは別の記事にしているので、ご参照ください。
ここでは、私が見落としがちだったポイントを説明します。
【確認①】HTMLの書き方
必須事項を確認しましょう！
コピペしたりしていると、必須classが入っていなかったりするので注意です。
<!-- Sliderを包むコンテナ要素 -->
<div class="swiper-container">
<!-- スライド要素を包む要素 -->
<div class="swiper-wrapper">
<!-- 各スライド -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>一番最初の「swiper-container」は、「swiper」でもOK
【確認②】JavaScriptの間違い
カンマ、閉じタグ、classのスペルミス 結構あります。
動かないときはよく確認します。
【確認③】JavaScriptのポイントチェック
サムネイル用のコードで記述した
var sliderThumbnail = new Swiper('.swiper-box2 #swiper2', {});の「var sliderThumbnail」変数は
メインで記述する
thumbs: {
swiper: sliderThumbnail,
},「thumbs」の中身と一緒でなければなりません。
参考にしたサイト
ありがとうございました！
Swiperの使い方を解説！動かないときの対処法やダウンロード方法も紹介
「Swiperの使い方やダウンロード方法って？」「Swiperが動かないときの対処方法は？」このようなお悩みを解決する記事です。
taekok.com
コメント