複数のページネーション出来ます。
単純にはページネーションの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>