トップページ > ブログ > swiperでスライドに複数(2つ)のpagination(ページネーション)を設定したい場合

BLOG

ブログ

UPDATE:2023.9.29

CATEGORY
仕事のこと

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

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


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

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

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


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



実際のコード


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

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE