html5 swiper 菜鸟,前端插件swiper使用新手教程

1.引入swiper.min.js和swiper.min.css两个文件，文件百度网盘下载地址链接：https://pan.baidu.com/s/1KwIzPfe9hFpSiMr5GqAWxw

提取码：9lda

压缩的css和js文件，引入方式不过多介绍

2.页面格式如下

// 1

// 2

// 3

完成上述步骤之后页面效果已经全部完成了，如果需要自定义样式轮播，可以不用1,2,3部分的img标签，自己手动写html内容和样式，根据自己具体要实现的效果添加。

3.接下来写js代码

window.οnlοad= function(){

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

effect:'coverflow', //滑动效果

touchAngle : 30, //滑动的角度超过30度无效

// 轮播图的方向，也可以是vertical方向

direction:'horizontal',

//环形切换关闭

loop: false,

// 切换的速度

speed:800, //滑动或者自动换页时的速度

// 如果需要分页器

pagination: {

el: '.swiper-pagination',

clickable:true,

type:'bullets',

},

paginationClickable:true,

// 这样，即使我们滑动之后， 定时器也不会被清除

autoplayDisableOnInteraction : false,

on: { //滑动调用该方法

slideChangeTransitionEnd: function(){

var slide = this.activeIndex;

//测试用

// alert("当前位置："+slide);//滑动结束时，告诉我现在是第几个slide(第几页)

},

},

});

mySwiper.pagination.bullets.css('background','white');

}

4.完成上述步骤后就可以实现一个简单的页面轮播的效果了，想要更多的效果可以参考官网的文档，这里就不再详细描述了。注意引用swiper的版本swiper4中文文档