Swiper自定義分頁器使用詳解

<link rel="stylesheet" href="path/to/swiper.min.css">

<div class="swiper-container">
 <div class="swiper-wrapper">
  <div class="swiper-slide">Slide 1</div>
  <div class="swiper-slide">Slide 2</div>
  <div class="swiper-slide">Slide 3</div>
 </div>
 <!-- 如果需要分頁器 -->
 <div class="swiper-pagination"></div>

 <!-- 如果需要導(dǎo)航按鈕 -->
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>

 <!-- 如果需要滾動條 -->
 <div class="swiper-scrollbar"></div>
</div>

<script src="path/to/jquery.js"></script>
<script src="path/to/swiper.jquery.min.js"></script>

<input class="btn btn-gray button-prev" name="" type="button" value="上一題">
<input class="btn btn-gray button-next" name="" type="button" value="下一題">

<script>  
 var mySwiper = new Swiper ('.swiper-container', {
  // 如果需要前進(jìn)后退按鈕
  nextButton: '.button-next',//對應(yīng)"下一題"按鈕的class
  prevButton: '.button-prev',//對應(yīng)"上一題"按鈕的class
  pagination: '.pagination',//分頁容器的css選擇器
  paginationType : 'custom',//自定義-分頁器樣式類型（前提）
  //設(shè)置自定義分頁器的內(nèi)容
  paginationCustomRender: function (swiper, current, total) {
   var _html = '';
   for (var i = 1; i <= total; i++) {
    if (current == i) {
    _html += '<li class="swiper-pagination-custom active">' + i + '</li>';
    }else{
    _html += '<li class="swiper-pagination-custom">' + i + '</li>';
    }
   }
   return _html;//返回所有的頁碼html
  }
 })
 //給每個頁碼綁定跳轉(zhuǎn)的事件 
 $('.swiper-pagination').on('click','li',function(){
  var index = this.innerHTML;
  mySwiper.slideTo(index-1, 500, false);//切換到第一個slide，速度為1秒
 })

</script>