0

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

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

単純に

pagination: {
    el: '.swiper-pagination',
},
pagination: {
    el: '.swiper-pagination-fraction',
    type: 'fraction',
},

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

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

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

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

1 件の回答 1

1

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

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

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

追記、
Swiper API の Eventsコールバックを使って、オリジナルデザインへのスクリプトを書けば、オリジナルのペジャーを増設(新設)出来ます。
以下 Eventsコールバックの設定例

 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");
        }
      }
});

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

$(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");
        }
      }
    });
});
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;
    }
<!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>

2
  • 返信が遅れて申し訳ないです、ご丁寧な回答ありがとうございます。 質問時の説明不足で申し訳ないのですが、それぞれ違うデザインのpaginationは生成できるか、という意図の質問でした。 例えば、1つ目のpaginationはyyz様に回答いただいたような数字が並んでいるデザイン、2つ目は分数で「1/4」といった具合です。 回答していただいた方法では複数のpaginationは生成できても、1つのデザインしか作れない気がします。 今回は結局、カレント取得、一から自作という方法で実装しました。 せっかく回答していただいたのに申し訳ないです>< また何かいい方法があればぜひ教えていただきたいです。
    – Yamasaki
    2019年3月20日 4:44
  • @Yamasaki Swiper APIのEventsコールバックを 回答へ追記しました。(スニペットも作り直しました。)
    – yyz
    2019年3月22日 7:42

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。