Swiper是一个功能插件，移动端、PC端均可使用。

有JS版本的，也有基于JQ版本的

meta标签 移动端 自适应

最简单的版本，没有按钮，和左右按钮的轮播图：

修改左右按钮 ：

.swiper-button-next，.swiper-button-prev{    background: none;}

布局：

     
        
      
            
       
        Slide 1
       
            
       
        Slide 2
       
            
       
        Slide 3
       
            
       
        Slide 4
       
        
      
 
     

　引入以及JS初始化：

 JQ的swiper

　　　　// 如果需要前进后退按钮 　　　　nextButton: '.swiper-button-next',  　　　 prevButton: '.swiper-button-prev' 　　　　/* // 如果需要滚动条 　　　　scrollbar: '.swiper-scrollbar',

　　　　scrollbarHide: false  滚动条隐藏：true 隐藏 false 显示

*/ }) 

各种属性对应的类型

/*两个swiper-slide之间的空白*/        spaceBetween: 30

　　

/*显示的模块数量 为2 auto 是按大小自动显示*/slidesPerView : 2,//'auto

 

/*滑动时 使得中间模块在中间*/        centeredSlides: true,

　　

/*默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，  设置为true则变为free模式，slide会根据惯性滑动且不会贴合*/freeMode: true

　　

/*设置为true时，鼠标覆盖Swiper时指针会变成手掌形状*/       grabCursor: true

　　

/*多行布局里面每列的slide数量。*/        slidesPerColumn: 2,

　　

     
       从右边向左边展示
     

　　

/*循环轮播图*/        loop: true

　　

/*是否键盘切换。设置为true时，能使用键盘方向键控制slide滑动。*/        keyboardControl: true

mousewheelControl: true  鼠标滚轮控制

/*自动切换的时间间隔（单位ms）*/        autoplay: 2500, /*如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay*/        autoplayDisableOnInteraction: false /*反方向操作        setInterval("mySwiper.slidePrev()", 2000);*/

 

/*切换效果，默认为"slide"（位移切换），值："fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）*/        effect: 'fade'

3d:overflow

 

 cube:

 

嵌套轮播图：

html:

     
        
      
            
       
        Horizontal Slide 1
       
            
       
         横向轮播里嵌套的纵向轮播图                
        
                    
         
                        
          
           Vertical Slide 1
          
                        
          
           Vertical Slide 2
          
                        
          
           Vertical Slide 3
          
         
                    
         
                
        
            
       
            
       
        Horizontal Slide 3
       
            
       
        Horizontal Slide 4
       
        
      
        
              
      
    
     

　　script:

　

var classA = new Swiper('.classA', {        nextButton: '.swiper-button-next',        prevButton: '.swiper-button-prev',        spaceBetween: 10,

　　　　　loop:true, 　　　　　loopedSlides: 9 注意 循环轮播图 上下对应

});    var classB = new Swiper('.classB', {        spaceBetween: 10,        centeredSlides: true,        slidesPerView: 'auto',        touchRatio: 0.2, 触摸距离与slide滑动距离的比率        slideToClickedSlide: true

　　　　　loop:true, 　　　　　loopedSlides: 9 注意 循环轮播图 上下对应 相同

});    /*两个Swiper相互控制 就可以实现缩略图的轮播图*/    classA.params.control = classB;    classB.params.control = classA;

　一些不常用的：

/*默认为true，Swiper会强制加载所有图片*/ preloadImages: false, // Enable lazy loading /*设为true开启图片延迟加载，使preloadImages无效。  需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。  背景图的延迟加载则增加属性data-background（3.0.7开始启用）。  还可以为slide加一个预加载，
    
  或者白色的
    
  当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。*/ /*启用延迟加载*/ lazyLoading: true，

breakpoints: {
      1024: {
          slidesPerView: 4,         spaceBetween: 40     },     768: {
          slidesPerView: 3,         spaceBetween: 30     },     640: {
          slidesPerView: 2,         spaceBetween: 20     },     320: {
          slidesPerView: 1,         spaceBetween: 10     } }

断点设定：根据屏幕宽度设置某参数为不同的值，类似于响应式布局的media screen。 只有部分不需要变换布局方式和逻辑结构的参数支持断点设定，如slidesPerView、slidesPerGroup、 spaceBetween，而像slidesPerColumn、loop、direction、effect等则无效。

/*自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化*/ autoHeight: true,

/*分页器 ‘bullets’  圆点（默认），‘fraction’ 分式 ，‘progress’  进度条 ，‘custom’ 自定义*/ paginationType: 'fraction'　

版本之间也有一些差异：

	swiper3.x	swiper2.x
引入文件	swiper.min.js swiper.min.css	idangerous.swiper.min.js idangerous.swiper.css
移动机制	transform	transform或left/top
布局方式	flex或一般布局，wrapper宽度为第一个slide	一般布局，wrapper宽度为slide总和
更新	正在更新	停止更新 最新版本2.7.6
兼容性	部分PC端浏览器，主流移动端浏览器	PC端浏览器，IE7+，部分移动端浏览器