swiper5 点击图换下一张,swiper轮播图的初步使用 ------ 2019-05-10

Document

//给轮播图的容器定义一个样式

.swiper-container{

width: 500px;

height: 300px;

}

Slide 1

Slide 2

Slide 3

// 初始化一个Swiper实例，给当前的Swiper实例添加配置项

var mySwiper = new Swiper('.swiper-container', {

initialSlide:0,

direction: 'horizontal',

loop: true,

autoplay: {

delay: 1000,

stopOnLastSlide: false,

disableOnInteraction: true,

},

// 分页器 也就是一个个的小点

pagination: {

el: '.swiper-pagination',

},

centeredSlides : true,

// 如果需要前进后退按钮

navigation: {

nextEl: '.swiper-button-next',

prevEl: '.swiper-button-prev',

},

slidesPerView : 3,

spaceBetween : 20,

slidesOffsetBefore:80,

})

(1) initialSlide:0,类型：number ；设定初始化时slide的索引，也就是对应索引的swiper-slide添加active属性；

(2)direction：Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)；也就是水平轮播或垂直轮播；

(3)speed:1000,切换速度，即slider自动滑动开始到结束的时间(单位ms)，也是触摸滑动时释放至贴合的时间。也就是一张轮播图开始轮播的时刻到结束轮播的时刻所用的时间；

(4)grabCursor:true,设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。(根据浏览器形状有所不同)；

(5)loop: true, 循环模式选项 true 或者false，设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。 loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。

(6)disableOnInteraction ：用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。操作包括触碰，拖动，点击pagination等。

也就是默认为 true：这种情况 我们操作过轮播图之后，比如鼠标移入，点击左右切换按钮，轮播图会停止自动轮播；

设置为false后，无论我们怎么操作，当时会停止自动轮播，操作完成后，会自动开启轮播；

(7)autoplay: {

delay: 9000,//自动切换的时间间隔，单位ms

},

(8)spaceBetween ：轮播图之间的间隔；

(9)slidesPerView ：设置slider容器能够同时显示的slides数量(carousel模式)。

可以设置为数字(可为小数，小数不可loop)，或者 'auto'则自动根据slides的宽度来设定数量。

loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。

slidesPerView: 'auto'目前还不支持多行模式(当slidesPerColumn > 1)

(10)loopedSlides：在loop模式下使用slidesPerview:'auto'，还需使用该参数设置所要用到的loop个数(一般设置大于可视slide个数2个即可)。简单点就是每次几张图一起轮播；