上一篇文章,我们大家来一起认识了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差不多,会呈现一个小手出来,只不过这里的小手是可以在你拖动轮播图的时候变成抓手状,根据浏览器不同,会多少有点差异。
那么好的,以上6个就是Swiper的一般选项里常用的部分。
萍子很想给大家展示一下效果是怎么样的,但是摸着良心说,由于CSDN只能上传2M的gif图片,这让我很无奈,所以还希望大家如果条件允许的话能自己动手试一下,这样记忆的效果也会更好,加油哦!