上一篇文章,我们大家来一起认识了Swiper的初级操作,有没有觉得很简单易学呢,

哈哈哈,其实这玩意本来就不太难。我认为凡是有文档可以读的,大部分的东西都是为了方便我们使用的不是吗,所以肯定都是易懂易学的,我们要做的就是尽可能的熟悉他们的操作方法,把他们的文档看明白会用就可以了。

信息时代,信息技术瞬息万变,要记得东西太多了,所以我觉得我们大家知道有啥方法可以用,用的时候如果想不起来,我们完全可以去查呀对不对。但是首要任务还是读懂文档,噗噗~突然感觉自己好像又在忽悠大家学习了

,哈哈哈~那我就不多说了,从今天开始,我们就一起来看看Swiper的各种方法吧,加油,Fighting……

一、Swiper的初始化

这个问题我们在上一篇博文中已经说过了,需要的小伙伴可以去看看Swiper基础

大体内容就是Swiper需要new一个对象


new Swiper(swiperContainer, parameters)

参数:


参一,必选的,HTML元素或者string类型,swiper容器的css选择器;

参二,可选的,具体的就是我们接下来会说的配置选项,上篇博文中提到的分页器/pagination、前一页后一页/prevButton/nextButton、滚动条/scrollbar等都是Swiper的配置选项,用来设置Swiper轮播图,使其……你懂得!

二、Swiper一般选项

1、initialSlide

参数:number类型,默认为0

个人理解:就是轮播图一上来显示的是轮播图页数中的第几张,索引从0开始,初始化的slide索引。

2、direction

参数:string类型,可设置水平/horizontal或垂直/vertical,默认水平

个人理解:是轮播图的滑动方向,可以水平滑动也可以垂直滑动。

3、speed

参数:number类型,默认300,单位ms

个人理解:轮播图的滑动速度,是轮播图当中一张图片的切换的速度。

4、autoplay

参数:number类型,默认0,单位ms

个人理解:是轮播图自动切换的时间间隔,如果不设置,不会自动切换

除此之外,它还有另外两种用法:

①.假如希望用户操作完,轮播图不再自动播放,可以设置autoplayDisabledOnInteraction

理解:这个的意思是用户操作swiper之后,是否禁止autoplay

参数:boolean,默认true,如果设置false,用户操作之后自动切换不会停止。这里的操作,包括用户触碰、拖动和点击pagination等。

②.如果用户希望在某一页上停留的时间与别的slider不一样,

这个时候我们可以给这一页单独设置一个data-swiper-autoplay="2000"

理解:在这一页停留2秒钟。

5、autoplayStopOnLast

参数:boolean类型,默认false

个人理解:是讲轮播图从头轮到尾是否会自动停止,不会循环进行,当然了需要注意的是这个在loop模式下是无效;

loop模式,我们在上一篇博文中也提到过,就是一种可以制造假象的方式,因为会在轮播后面添加图片,所以这个自动停止的autoplayStopOnLast是无效的。

6、grabCursor

参数:boolean类型,默认false

个人理解:这个东西跟css的cursor的pointer差不多,会呈现一个小手出来,只不过这里的小手是可以在你拖动轮播图的时候变成抓手状,根据浏览器不同,会多少有点差异。