UPDATE：2023.9.29
- CATEGORY
- 仕事のこと
swiperでスライドに複数（２つ）のpagination（ページネーション）を設定したい場合
swiperで一つのスライドに複数のpaginationを設定したい
普段スライダーはswiperを使用していますが、
先日このようなデザインでスライダーを作成する場面がありました。
ページネーションがやや特殊ですね。もしかしたらページネーション一つでこれを再現できるのかもしれないのですが、
私にはページネーションを２つ使う方法しか思いつけなかったので、
結局どう実装したかの記録です。
ちなみにswiperはページネーションはスラーダー一つにつき１つしか設定できないようです。
実際のコード
HTML
JS
〈script>
let mySwiper_sub = new Swiper('.swiper_sub', {
slidesPerView: 1,
pagination: {
el: '.swiper-my-pagination-sub',
type: 'fraction',//スライド総数と現在のスライド番号の表示
},
});
let mySwiper_main = new Swiper('.swiper_main', {
loop: true,
slidesPerView: 1,
effect: 'fade',
pagination: {
el: '.swiper-my-pagination-main',
clickable: true,
},
thumbs: {
swiper: mySwiper_sub//「swiper_sub」と連動
}
});
〈/script> メインのスライド（swiper_main）に対してサブのスライド（swiper_sub）を連動させ、
サブスライドのページネーションをメインのスライドのページネーションに見せかけることでデザインの形にしました。
cssは省略します。
デフォルトでは「swiper_main」のページネーションに●が表示されるかと思います。
cssで線に変更するとデザインどおりの形にできます。
（「swiper_sub」のページネーションは「現在のスライド番号/総スライド数」の表示）
〈!-- メインのスライダー -->
〈div class="swiper-container swiper_main">
〈div class="swiper-wrapper">
〈div class="swiper-slide">
〈img src="img_01.jpg" alt="">
〈/div>
〈div class="swiper-slide">
〈img src="img_02.jpg" alt="">
〈/div>
〈div class="swiper-slide">
〈img src="img_03.jpg" alt="">
〈/div>
〈/div>
〈div class="swiper-pagination swiper-my-pagination-main">〈/div>
〈/div>
〈!-- サブのスライダー -->
〈div class="swiper-container swiper_sub">
〈div class="swiper-wrapper">
〈div class="swiper-slide">
〈/div>
〈div class="swiper-slide">
〈/div>
〈div class="swiper-slide">
〈/div>
〈/div>
〈div class="swiper-pagination swiper-my-pagination-sub">〈/div>
〈/div>