Swiper学习之二---swiper的配置选项 ①

上一篇文章，我们大家来一起认识了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图片，这让我很无奈，所以还希望大家如果条件允许的话能自己动手试一下，这样记忆的效果也会更好，加油哦！