swiper.slideTo() 與 swiper-pagination 搭配使用

 期望實現效果是用swiper實現與樓梯相似的效果，不同的是用swiper做翻頁的...

在一開始寫的時候想的是自己寫一個列表替換掉swiper的分頁器效果...，最終還是實現了！

話不多說，看問題

首先引入依賴配置（我引入的是自己的路徑）

<link rel="stylesheet" href="./Swiper-3.4.2/dist/css/swiper.min.css" />  
 <script src="./jquery.min.js"></script>
<script src="./Swiper-3.4.2/dist/js/swiper.min.js"></script>

HTML代碼

<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 class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
</div>
<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  </li>
</ul>

CSS沒寫（做參考）

<style>
      html,
      body {
        position: relative;
        height: 500px;
      }
      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: 500px;
      }
      .swiper-slide {
        font-size: 18px;
        background: #fff;
      }
</style>

JS

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        // slidesPerView: 3,   //  當前頁展示幾個slide頁面
        paginationClickable: true,
        spaceBetween: 30,  //  slide之間的間距
        initialSlide: 0, // 坐標索引值初始是第幾個
        onTransitionEnd: function (swiper) {
          //  回調函數，過渡結束時觸發，接收Swiper實例作為參數。
          console.info('頁面跳轉到第:', swiper.activeIndex, ' 頁') //  獲取當前swiper頁面的索引值  
        },
      })


var lis = $('ul>li')
$.each(lis,function (index, element) {
    $(element).click(function () {
         console.log(index)          
         var swiperIndex = swiper.activeIndex // 定義swiper.activeIndex          
         swiperIndex = index //  使按鈕索引值與swiper的索引值相等          
         index = swiper.slideTo(swiperIndex, 1000, false) // swiper.slideTo   按鈕的索引值是多少，swiper的索引值就跳到多少      
})      
   })

此時會想挺好，實現了！！！

但是，你可能沒想到的是當你多次點擊這個列表進行slide切換的時候，這時候問題出來了

 

true與false是怎么回事！！！
經過查閱swiper函數同一個事件經過多次連續觸發會失效。

經過查看文檔得知有 paginationType:'custom'; 得知這個屬性。

 

整理后

首先在HTML中申明出分頁器

<div class="swiper-pagination"></div>

HTML代碼

   <!-- Swiper -->
   <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 class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
      </div>
      <!-- Add Pagination -->
      <div class="swiper-pagination"></div>
    </div>
    <button class="btn">按鈕</button>

CSS（可忽略不計樣式）

   <style>
      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: 500px;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
      }
      ul,
      li {
        list-style: none;
      }
      .swiper-pagination-custom {
        color: skyblue;
      }
      .swiper-pagination-custom.active {
        color: coral;
      }
    </style>

JS

<script>      
    var mySwiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination', //  分頁容器的css選擇器        
        paginationType: 'custom', //   自定義-分頁器樣式類型（前提）
       //設置自定義分頁器的內容      
        paginationCustomRender: function (swiper, current, total) {  
                                                                           // current （paginationCurrentClass） 分頁器的當前索引的類名
          var _html = ''                                              // total   （paginationTotalClass）  分頁器總數的類名          
          var t = ''
          for (var i = 1; i <= total; i++) {          
               if (i == 1) {
                  t = '第 1 頁'          
                } else if (i == 2) {
                  t = '第 2 頁'
                } else if (i == 3) {
                  t = '第 3 頁'
                } else if (i == 4) {
                  t = '第 4 頁'  
                } else if (i == 5) {
                  t = '第 5 頁'  
                } else if (i == 6) {
                  t = '第 6 頁'  
                } else if (i == 7) {
                  t = '第 7 頁'
                } else if (i == 8) {
                  t = '第 8 頁'
                } else if (i == 9) {
                  t = '第 9 頁'
                } else if (i == 10) {
                  t = '第 1 頁0'
                }

            if (current == i) {
                 _html +=
                  '<li class="swiper-pagination-custom active">' + t + '</li>'
             } else {
                 _html += '<li class="swiper-pagination-custom">' + t + '</li>'  
             }
          }      
       return _html //返回所有的頁碼html
        },  
    })

      //給每個頁碼綁定跳轉的事件      
    $('.swiper-pagination').on('click', 'li', function () {
        var index = $(this).index()
         mySwiper.slideTo(index, 500, false) //切換到第一個slide，速度為1秒
        console.log(index)
      })

      // 返回第一個slide
      $('.btn').on('click', function () {
        mySwiper.slideTo(0, 500, false)
     })
    </script>

此時那種不友好的情況消失了