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>

此时那种不友好的情况消失了