swiper 轮播中常用的效果，持续更新

谁借莪１个温暖的怀抱￠ 2023-06-05 11:24 26阅读 0赞

swiper一款非常好用的轮播插件，支持移动端和PC端，用过很多次了，这次简单的总结一下。方便以后查找使用，说明一下，下面的例子是基于swiper 4.0+版本的，如果你是其他的版本，请自行[前往官网][Link 1]查看

至于为什么使用swiper，而不是自己手写，请看下面官网的截图：

![1103600-20190808172028578-1476266331.png][]

开个玩笑，说白了，就是这个确实非常好用，而且很好上手，没有什么难度。而且里面的API很友好，不像有的文档，看起来很费劲，这个很清晰，好了，不说了，直接进入主题。

1.  第一步肯定是引入他的css和js，它提供了cdn和下载引入两种方式，由于我们现在的项目不是部署在国内，所以我就选择了下载引入。
2.  引入完成之后，就需要按照他的DOM结构引入里，这里，需要注意的是，他的DOM结构是能滑动的骨架，有的class名字可以更改，但是有的是不能更改的。所以还是建议大家，建议他的DOM结果引入。简单的说，就是三层DIV

1 <div class="swiper-container">
     2     <div class="swiper-wrapper">
     3         <div class="swiper-slide">Slide 1</div>
     4         <div class="swiper-slide">Slide 2</div>
     5         <div class="swiper-slide">Slide 3</div>
     6     </div>
     7     
     8     <div class="swiper-pagination"></div>
     9     
    10     
    11     <div class="swiper-button-prev"></div>
    12     <div class="swiper-button-next"></div>
    13     
    14     
    15     <div class="swiper-scrollbar"></div>
    16 </div>
    17 导航等组件可以放在container之外

3.初始化Swiper   这里就是swiper的全部控制器了。这里也是3.0和4.0最大不同的地方。（2.0我还真的没有用过）

1   var mySwiper = new Swiper ('.swiper-container', { 2     direction: 'vertical', // 垂直切换选项
     3     loop: true, // 循环模式选项
     4     
     5     // 如果需要分页器
     6 pagination: { 7       el: '.swiper-pagination', 8 }, 9     
    10     // 如果需要前进后退按钮
    11 navigation: { 12       nextEl: '.swiper-button-next', 13       prevEl: '.swiper-button-prev', 14 }, 15     
    16     // 如果需要滚动条
    17 scrollbar: { 18       el: '.swiper-scrollbar', 19 }, 20   })

其实到这个时候，最简单的一个swiper已经可以正常的运行了。但是这个毕竟是官网的例子，不是大家通用的， 所以在实际应用中，需要我们自己改造。

\------------------------------------------------------------------------------华丽的分割线---------------------------------------------------------------------

下面介绍一下，我自己的是怎么应用的。请看下图，就是简单切换

![1103600-20190808173202344-894136075.png][]

本来是做的，点击上面，切换两个显示，但是UI设计师要求，这个要像手机应用一样滑动更换。所以这个时候就想到了swiper

首先应该是我的DOM文档结构。请看下面的截图，为什么是截图，因为截图的时候，我用编辑器把代码折叠了，这样能更好的看到swiper的DOM结构

![1103600-20190808173516249-1231129614.png][]

大家可以看到，上面的那个ul里面，两个选项是独立的。而下面的就是swiper中的标准文档结构，其中两个dl是我的页面内容。这个时候，来初始化这个swiper，请看下面的代码

1 var mySwiper = new Swiper('.swiper-container', { 2         direction: 'horizontal', // 切换选项
     3         loop: false, // 循环模式选项 
     4 on: { 5             slideChangeTransitionEnd: function () { 6                 console.log(this.activeIndex); //切换结束时，告诉我现在是第几个slide
     7                 var index = this.activeIndex; 8                 $("#header li").removeClass("this_page").eq(index).addClass("this_page"); 9 }, 10 }, 11 
    12     })

这里比较不同的是，在第4行，加入了一个方法，请看官方的解释：回调函数，swiper从一个slide过渡到另一个slide结束时执行。就是当我们滑动完成了，这里会得到一个现在显示的是第几张的一个索引值，通过this.activeIndex来获得，这个时候，我获取到这个值以后，就可控制上面的li元素，添加自定义属性，我这里用到的选中的自定义属性是this\_page。当我给那个li添加上这个class名时，就能让这一页选中。这里就实现了下面控制上面了。但是这样显然是不完整的， 应该是一个双向控制，点击上面的li，也应该能控制下面的滑动，所以就继续寻找，找到了另一个方法。

1 $("#header li").click(function () { 2         var index = $(this).index(); 3         $(this).siblings("li").removeClass("this_page"); 4         $(this).addClass("this_page"); 5 console.log(index); 6 mySwiper.slideTo(index); 7 })

及时slideTo(index)方法。请看官方的解释：控制Swiper切换到指定slide。然后它里面能传输三个参数，这三个参数的具体用法请看下面你的表格

<table> 
 <thead> 
  <tr> 
   <th><span style="font-size:14px;">参数名</span></th> 
   <th><span style="font-size:14px;">类型</span></th> 
   <th><span style="font-size:14px;">是否必填</span></th> 
   <th><span style="font-size:14px;">描述</span></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><span style="font-size:14px;">index</span></td> 
   <td><span style="font-size:14px;">num</span></td> 
   <td><span style="font-size:14px;">必选</span></td> 
   <td><span style="font-size:14px;">指定将要切换到的slide的索引</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px;">speed</span></td> 
   <td><span style="font-size:14px;">num</span></td> 
   <td><span style="font-size:14px;">可选</span></td> 
   <td><span style="font-size:14px;">切换速度(单位ms)</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px;">runCallbacks</span></td> 
   <td><span style="font-size:14px;">boolean</span></td> 
   <td><span style="font-size:14px;">可选</span></td> 
   <td><span style="font-size:14px;">设置为false时不会触发transition回调函数</span></td> 
  </tr> 
 </tbody> 
</table>

到此，我就实现了双向控制，点击上面的li能控制下面的滑动，下面的滑动，也能更改上面的选中。如果还有什么问题，欢迎留言或者自行查看[官网API文档][API]

转载于:https://www.cnblogs.com/daniao11417/p/11322698.html

[Link 1]: https://www.swiper.com.cn/
[1103600-20190808172028578-1476266331.png]: /images/20230601/3b1029ec0fbd42b096ec6ce2b1d4e795.png
[1103600-20190808173202344-894136075.png]: /images/20230601/4611243f96b24e77b19053fdd9d8bf99.png
[1103600-20190808173516249-1231129614.png]: /images/20230601/3a252f439f2b4d629139c24c1428fd68.png
[API]: https://www.swiper.com.cn/api/start/new.html