POSTED | 2023.09.29

swiperでスライドに複数（２つ）のpagination（ページネーション）を設定したい場合

WWEBのこと

WRITER : Sasayama Sayaka

swiperでスライドに複数（２つ）のpagination（ページネーション）を設定したい場合

美術館と美味しいものが大好きなクリエイター

プロフィールを見る

swiperで一つのスライドに複数のpaginationを設定したい

普段スライダーはswiperを使用していますが、
先日このようなデザインでスライダーを作成する場面がありました。

ページネーションがやや特殊ですね。

もしかしたらページネーション一つでこれを再現できるのかもしれないのですが、
私にはページネーションを２つ使う方法しか思いつけなかったので、
結局どう実装したかの記録です。

ちなみにswiperはページネーションはスラーダー一つにつき１つしか設定できないようです。

実際のコード

HTML



　　〈!-- メインのスライダー -->
　　〈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>

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」のページネーションは「現在のスライド番号/総スライド数」の表示）

この記事をシェアする