swiper 微场景的简单应用

使用步骤：

首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。

如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js。

 

打开swiper的官网  选择

然后：

下面的直接按照上面要求 把上面的html  js css 复制下来就可以了 

然后下面是重点：

给每一项添加一个class名  并给个背景颜色 得到的效果如下：

但是这个时候  并不能左右滑动的，而且两个按钮也不起作用。因为这里你还没有对当前轮播对象的实例化声明。

然后下一步初始化swiper

这里用法和iScroll用法是一样   swiper.min.js提供的核心对象就是swiper   初始化的话 new一个就可以了，你想让当前那个dom元素轮播，所以第一个参数里面应该选择到当前dom元素。可以通过类名来定义

direction  轮播的方向   vertical 垂直的  

loop 循环

如果上方的结构删掉的话 下面的配置也要删掉。

如果想要让他自动轮播的话  需要加个属性  autoplay：2000；（自动滑动，后面跟的是时间） 这样就可以自动轮播了

initialSlide :2 设定初始化时slide的索引

direction :’’ Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。

speed滑动速度，即slider自动滑动开始到结束的时间（单位ms）。

如下图 ：目前设置：

var mySwiper = new Swiper ('.swiper-container', {
	    direction: 'horizontal',
	    loop: true,
	    autoplay:1000,
	    speed:2000,
	    initialSlide:2,
	    
	    // 如果需要分页器
//	    pagination: '.swiper-pagination',
	    
	    // 如果需要前进后退按钮
	    nextButton: '.swiper-button-next',
	    prevButton: '.swiper-button-prev',
	    
	    // 如果需要滚动条
	    scrollbar: '.swiper-scrollbar',
	}) 

自由模式 freeMode

默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，

设置为true则变为free模式，slide会根据惯性滑动且不会贴合。

direction: 'horizontal',
	    loop: true,
//	    autoplay:1000,
//	    speed:2000,
//	    initialSlide:2,
	    freeMode:true,

透明度轮播：effect:'fade'

还有比较有意思的  3D滑动

direction: 'horizontal',
	    loop: true,
	    autoplay:1000,
	    speed:2000,
//	    initialSlide:2,
//	    freeMode:true,
		effect:'cube',

在这里我们可以把默认的按钮 滚动条 和分页器 全部给注释了，  然后给一个speed  这样看着效果会更好 如下：

但是在这里会有个bug  就是在倒滑的时候 会出现色彩不均，解决办法是在用3D滑动的时候 把loop给关了

后面还有 卡片滑动的效果： effect : 'coverflow',

还有一种类似以中轴为轴心旋转的效果 effect : 'flip',

 

下面是分页器的设置 ：

paginationType 分页器样式类型，可选 ‘bullets’ 圆点（默认） ‘fraction’ 分式 ‘progress’ 进度条

paginationClickable 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。

paginationHide 默认分页器会一直显示。这个选项设置为true时点击Swiper会隐藏/显示分页器。

 

然后是切换按钮颜色的改变  swiper-button-white  有白色 黑色 蓝色 三种

然后是滚动条的配置

scrollbar:'.swiper-scrollbar'  Scrollbar容器的css选择器或HTML元素。

scrollbarDraggable该参数设置为true时允许拖动滚动条。

keyboardControl : true设置为true时，能使用键盘方向键控制slide滑动

loop : true设置为true 则开启loop模式。loop模式：会在wrapper前后生成若干个slides让slides看起来是衔接的，用于无限循环切换。

 

 

swiper animate 的使用方法

Swiper Animate使用方法---------此插件不适用于loop模式 1、使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。 2、初始化时隐藏元素并在需要的时刻开始动画。

var mySwiper = new Swiper ('.swiper-container', { 
	onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit 		swiperAnimateCache(swiper); //隐藏动画元素 		swiperAnimate(swiper); //初始化完成开始动画
	 }, 
	onSlideChangeEnd: function(swiper){
	 	swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	 } 
})