swiper一款非常好用的轮播插件,支持移动端和PC端,用过很多次了,这次简单的总结一下。方便以后查找使用,说明一下,下面的例子是基于swiper 4.0+版本的,如果你是其他的版本,请自行前往官网查看
至于为什么使用swiper,而不是自己手写,请看下面官网的截图:
![](https://i-blog.csdnimg.cn/blog_migrate/aef2e1c1ae416dc228bf71e7d077ee36.png)
开个玩笑,说白了,就是这个确实非常好用,而且很好上手,没有什么难度。而且里面的API很友好,不像有的文档,看起来很费劲,这个很清晰,好了,不说了,直接进入主题。
- 第一步肯定是引入他的css和js,它提供了cdn和下载引入两种方式,由于我们现在的项目不是部署在国内,所以我就选择了下载引入。
- 引入完成之后,就需要按照他的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已经可以正常的运行了。但是这个毕竟是官网的例子,不是大家通用的, 所以在实际应用中,需要我们自己改造。
------------------------------------------------------------------------------华丽的分割线---------------------------------------------------------------------
下面介绍一下,我自己的是怎么应用的。请看下图,就是简单切换
![](https://i-blog.csdnimg.cn/blog_migrate/1ecc1f49d72de6ac703fd040f04075b7.png)
本来是做的,点击上面,切换两个显示,但是UI设计师要求,这个要像手机应用一样滑动更换。所以这个时候就想到了swiper
首先应该是我的DOM文档结构。请看下面的截图,为什么是截图,因为截图的时候,我用编辑器把代码折叠了,这样能更好的看到swiper的DOM结构
![](https://i-blog.csdnimg.cn/blog_migrate/05b22cbe07ef00b5008224a41102cbdd.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。然后它里面能传输三个参数,这三个参数的具体用法请看下面你的表格
参数名 | 类型 | 是否必填 | 描述 |
---|---|---|---|
index | num | 必选 | 指定将要切换到的slide的索引 |
speed | num | 可选 | 切换速度(单位ms) |
runCallbacks | boolean | 可选 | 设置为false时不会触发transition回调函数 |
到此,我就实现了双向控制,点击上面的li能控制下面的滑动,下面的滑动,也能更改上面的选中。如果还有什么问题,欢迎留言或者自行查看官网API文档