前端插件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.onload= 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中文文档