もんちゃんブログ 
今回はSwiperを使用した際に学んだことをまとめていきます。
swiperでドット表示も分数表示も使用したい！
つまりページネーションの機能を2つ同時に使用したい！
しかし、ページネーションの増やし方がわからない…
そう思ったことがある方にぜひ読んでいただきたい記事です！
コピペで完結いたします！
※2022/11/15コード編集しました！
コードミスがあり、丸いボタンを押しても画像が切り替わっていませんでしたので、こちら修正させていただきました！
やりたかったこと
完成形がこちら
具体的な事
・Swiperを使用してスライドを作成
・次へと前へのボタンを表示
・ドットを表示
・今何枚目を表示（分数）
悩んだこと
・Swiperを使用してスライドを作成
→OK！
・次へと前へのボタンを表示
→OK！
・ドットを表示
・今何枚目を表示
えっ！？ページネーションは1つしか使えない！？！？
広告
結果のコード
HTML
<div class="content"> <div class="swiper tab-contents"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="img/IMG_2898.JPG"></div> <div class="swiper-slide"><img src="img/IMG_4274.JPG"></div> <div class="swiper-slide"><img src="img/IMG_5004.JPG"></div> <div class="swiper-slide"><img src="img/IMG_5072.JPG"></div> <div class="swiper-slide"><img src="img/PC090155.png"></div> </div> </div> <div class="flex"> <!-- Swiper --> <div class="swiper tab-menu"> <div class="swiper-wrapper"> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> <div class="swiper-slide"></div> </div> </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="btn_box"> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> </div>
CSS
.content {
margin:200px auto;
width:500px;
position:relative;
}
.tab-contents {
margin-bottom:50px;
}
.tab-contents .swiper-wrapper {
height:auto;
}
.tab-contents .swiper-slide {
width:500px;
height:300px;
}
.tab-contents .swiper-slide img {
width:100%;
height:100%;
object-fit:cover;
vertical-align:baseline;
}
.flex {
display:flex;
justify-content:space-between;
width:100%;
}
.tab-menu.swiper {
width:30%;
margin:0;
}
.tab-menu .swiper-slide {
width:7px;
height:7px;
border:1px solid #95e1d3;
border-radius:50%;
}
.tab-menu .swiper-slide-thumb-active {
border:1px solid #fce38a;
background:#fce38a;
}
.swiper-pagination {
color:#fce38a;
font-weight:500;
font-size:0.88rem;
text-align:center;
width:32%;
position:relative;
bottom:0;
}
.btn_box {
width:32%;
}
.swiper-button-prev,
.swiper-button-next {
right:0;
bottom:0;
margin:0;
top:unset;
left:unset;
}
.swiper-button-next {
color:#95e1d3;
right:0;
}
.swiper-button-prev {
color:#eaffd0;
right:80px;
}
Js
const galleryThumbs = new Swiper ('.tab-menu', {
spaceBetween: 20,
slidesPerView: 'auto',
freeMode: false,
watchSlidesVisibility: true,
watchSlidesProgress: true,
slideActiveClass: 'swiper-slide-active',
});
galleryThumbs.on ('tap', function () {
const current = galleryTop.activeIndex;
galleryThumbs.slideTo (current, 500, true);
});
const galleryTop = new Swiper ('.tab-contents', {
loop: true,
slidesPerView: 'auto',
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
speed: 1000,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination02',
type: 'fraction',
clickable: true,
},
thumbs: {
swiper: galleryThumbs,
},
breakpoints: {
// 500px以上の場合
500: {
slidesPerView: 'auto',
},
},
});
【おすすめ】UdemyでともすたさんのWordPress講座を学んでみる！！ 
解説
Swiperの使い方（簡単Ver）
headに下記を記載
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
</body>の前に記載
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
これでSwiper発動
<div class="swiper ">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>
後はJsで詳しい設定をしていきます。
今回のカスタマイズについて
Swiperはとても簡単に前・次へのボタンやページネーション、スクロールバーを入れることができます。
参照記事
ページネーションの標準のカスタマイズで、ドットの表示を分数の表示に変えることができます。
しかし、ページネーションは1つのスライダーに対し1つしか使えないため（私調べ）
分数での表示
ドット
この2つを同時に叶えるためには、一工夫が必要でした。
・分数の表示
今回はこちらを標準のカスタマイズで実装しました。
実装方法はとても簡単でJsに一言加えるだけです。
pagination: {
el: '.swiper-pagination',
type: 'fraction'
},
typeの’fraction’の設定でデフォルトのドットから分数表示になります。
※swiperの記載をしている中に追記してくださいませ。
・ドットの表示
こちらは新たにSwiperを発動させ、JsでメインのSwiperと連動させることで実装をしました。
上記、結果のコードHTMLの39行目です。
参考記事
Jsの記載は参考記事と全く同じように記載をしています。
肝となっているところがこちらのコード
thumbs: {
swiper: galleryThumbs //ここ！！
}
ドットのswiperの名前と上記のここ！！の箇所を合わせるだけです。
後はcssでドットのスライド自体を◯になるように実装すれば完成です！！
上記CSSの42行目あたり。
私の調べ方の問題なのか、なかなか、これ！！という記事に出会うことができなかったため、まとめてみました。
もしかすると、実は普通にページネーションを2つ使用できたりするのかもしれません。
もしくはswiperを使用するからこそややこしくなっている可能性もあります。
しかし！実装できたので一安心。
ということにしたいと思います！
おまけ
【おすすめ】UdemyでともすたさんのWordPress講座を学んでみる！！
Shopifyを学んでWeb制作の単価を上げてみませんか？
リキマスでShopifyを学ぶ！
みなさんはどんなデスク環境で作業を行われていますか？？
私一推しのキーボードはこちらです↓！！
ぜひご覧ください٩( ᐛ )و
最後まで読んでいただきありがとうございました。
何か気になることや、もっと簡単に実装する方法があればコメントをいただけるととっても嬉しいです(*´∇｀*)
広告
