

web上でスライダーを作る「swiper」についての質問です。

実装のゴールとしては、1つのページに複数のswiperを配置するのではなく、  
1つのページに1つのswiperを作り、その中に2つのpaginationを生成すること、です。

単純に

[code]

    pagination: {
    　　　　el: '.swiper-pagination',
    },
    pagination: {
    　　　　el: '.swiper-pagination-fraction',
    　　　　type: 'fraction',
    },
    
[/code]

こう2つ記述した場合、下のデザインのものだけが生成されました。

知りたいことは  
①1つのswiperに対して複数個のpaginationはそもそも生成できるのか  
またその場合の方法も教えていただきたいです。  
②できない場合に考えられる他の実装方法  
(realIndex等でカレントを操作すれば1から作ることも可能だとは存じますが、できるだけ簡単で工数のかからない手法が望ましいです><)

公式サイトや、Google先生に「swiper pagination
複数」等聞いてきたのですが、1つのページに複数個のswiperを設置、という旨の質問しか見受けられず、自己解決に至ることができなかったので質問させていただきました。

回答よろしくお願いいたします。


CC BY-SA 4.0
2019-03-10T17:59:40.140
53349
2020-12-23T10:55:26.443
2020-12-23T10:55:26.443
32986
28167
question
jquery swiper
swiperで、1つのスライダーに対して複数個のpaginationを生成したい


複数のページネーション出来ます。

単純にはページネーションのdivを複製(`<div class="swiper-
pagination"></div>`)して位置をcssで調整すると増やせます。

複雑なことを表現したいならSwiper APIを使ってカスタマイズすると良いでしょう。

**追記、**  
[Swiper API](https://idangero.us/swiper/api/#events) の
Eventsコールバックを使って、オリジナルデザインへのスクリプトを書けば、オリジナルのペジャーを増設（新設）出来ます。  
以下 Eventsコールバックの設定例

[code]

     swiper2 = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'progressbar',
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
            init: function () {
              //初期処理
              var li = $("#p2 li");
              li.removeClass("act1");
              li.eq(p2[ss_array[0]]).addClass("act1");
            },
            slideChangeTransitionStart: function () {
              //スライダーが変更されたときの処理
              var act = this;
              var index = act.activeIndex;
              var li = $("#p2 li");
              li.removeClass("act1");
              li.eq(p2[ss_array[index]]).addClass("act1");
            }
          }
    });
    
[/code]

以下 Swiper 4.5.0のデモ 050-pagination-progress.htmlへ追加修正したコードをスニペットへ入れました。

[code]

    $(function(){
      var p2 = {"A":"0","B":"1","C":"2","D":"3","E":"4","F":"5","G":"6","H":"7","I":"8","J":"9"};
    
      var ss = $(".swiper-slide");
      var ss_array = Array;
      ss2_array = Array;
      for(key in ss){
        ss_array[key] = ss.eq(key).attr("ss");
        ss2_array[ss.eq(key).attr("ss")] = key;
      }
    
         swiper2 = new Swiper('.swiper-container', {
          pagination: {
            el: '.swiper-pagination',
            type: 'progressbar',
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          on: {
            init: function () {
              /*初期処理*/
              var li = $("#p2 li");
              li.removeClass("act1");
              li.eq(p2[ss_array[0]]).addClass("act1");
            },
            slideChangeTransitionStart: function () {
              /*スライダーが変更されたときの処理*/
              var act = this;
              var index = act.activeIndex;
              var li = $("#p2 li");
              li.removeClass("act1");
              li.eq(p2[ss_array[index]]).addClass("act1");
            }
          }
        });
    });
[/code]

[code]

    html, body {
          position: relative;
          height: 100%;
        }
        body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color:#000;
          margin: 0;
          padding: 0;
        }
        .swiper-container {
          width: 100%;
    /*      height: 100%;*/
        }
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
    
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
        .act1 {
          color: #2C8DFB;
        }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Swiper demo</title>
      <!-- Link Swiper's CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css">
      <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
      <!-- Demo styles -->
      <style>
    
      </style>
    </head>
    <body>
    <div>
    <ul id="p2">
      <li onclick="swiper2.slideTo(ss2_array['A'])">A</li>
      <li onclick="swiper2.slideTo(ss2_array['B'])">B</li>
      <li onclick="swiper2.slideTo(ss2_array['C'])">C</li>
      <li onclick="swiper2.slideTo(ss2_array['D'])">D</li>
      <li onclick="swiper2.slideTo(ss2_array['E'])">E</li>
      <li onclick="swiper2.slideTo(ss2_array['F'])">F</li>
      <li onclick="swiper2.slideTo(ss2_array['G'])">G</li>
      <li onclick="swiper2.slideTo(ss2_array['H'])">H</li>
      <li onclick="swiper2.slideTo(ss2_array['I'])">I</li>
      <li onclick="swiper2.slideTo(ss2_array['J'])">J</li>
    </ul>
    </div>
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" ss="J">Slide J</div>
          <div class="swiper-slide" ss="H">Slide H</div>
          <div class="swiper-slide" ss="F">Slide F</div>
          <div class="swiper-slide" ss="D">Slide D</div>
          <div class="swiper-slide" ss="I">Slide I</div>
          <div class="swiper-slide" ss="C">Slide C</div>
          <div class="swiper-slide" ss="A">Slide A</div>
          <div class="swiper-slide" ss="G">Slide G</div>
          <div class="swiper-slide" ss="B">Slide B</div>
          <div class="swiper-slide" ss="E">Slide E</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      <!-- Swiper JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
    
      <!-- Initialize Swiper -->
      <script>
    
      </script>
    </body>
    </html>
[/code]


CC BY-SA 4.0
2019-03-12T07:39:12.273
53383
2019-03-22T07:55:48.923
2019-03-22T07:55:48.923
22793
22793
53349
answer