swiper套路

swiper插件 quick start

基本结构

	<div class="swiper-container">
	  <div class="swiper-wrapper">
	    <div class="swiper-slide">slider1</div>
	    <div class="swiper-slide">slider2</div>
	    <div class="swiper-slide">slider3</div>
	  </div>
	</div>
	//初始化
	<script> 
	var mySwiper = new Swiper('.swiper-container', {
		autoplay: 5000,//可选选项，自动滑动
	})
	</script>

一般选项

	
	<script language="javascript"> 
	var mySwiper = new Swiper('.swiper-container',{
	initialSlide :2,//设置图片张数
	direction : 'vertical',//滑动方向
	autoplay : 3000,//轮播时间，默认为true
	speed:300,//每张图滑动的速度
	autoplayDisableOnInteraction : false,//默认为true，用户操作之后，轮播自动停止，操作包括触碰，点击（分页器），拖动
	autoplayStopOnLast : true,//loop模式下无效，如果为true，切换到最后一张时自动停止，如果为false，切换到最后一张会自动回到第一张
	grabCursor : true, //鼠标进入窗口会变手型，点击会变握拳
	loop : true, // 前后各加一张图，无缝轮播
	zoom : true,// 点击放大，需要在slide中添加类名swiper-zoom-container，<div class="swiper-slide"> <div class="swiper-zoom-container"> <img src="path/to/image"> </div> </div>
	zoomMax :5, //允许最大倍率
	zoomMin :2, //允许最小倍率
	})
	/*如果只有一个slide就锁住swiper
	if(mySwiper.slides.length<=3){
	mySwiper.lockSwipes();
	}*/
	</script>
	

方法

	<script language="javascript"> 
	var mySwiper = new Swiper('.swiper-container',{
	onTap: function(swiper){
	      alert('你tap了Swiper');
	    }
	})
</script>