swiper里面几个有用的参数

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


slidesPerView: 3,  // 显示的数目
spaceBetween: 30,  // 元素之间的距离
loop: true,  // 循环轮播
autoplay: {
  delay: 2500,  // 循环时间
  disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay]。默认为true：停止。
},
          
//slide的切换效果 默认为"slide"（位移切换），可设置为'slide'（普通切换、默认） "fade"（淡入） "cube"（方块） "coverflow"（3d流） "flip"（3d翻转）
  effect : 'fade',
  //加上这个，就能做图片从远处到近处的推移动画
  fade: {
    crossFade: true,
  }

// 弹性切换
speed: 1000,

//鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
  autoplay: {
    pauseOnMouseEnter: true,
  },


  
          
// 左右按钮
navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
},
          
// 分页器  ----分页器样式类型，可选 ‘bullets’ 圆点（默认） ‘fraction’ 分式 ‘progressbar’ 进度条 ‘custom’ 自定义
pagination: {
    el: '.swiper-pagination',
    dynamicBullets: true,
     type: 'bullets',
    //type: 'fraction',
    //type : 'progressbar',
    //type : 'custom',
},          
//自定义指示器
el: '.swiper-pagination',
    clickable: true,    // 此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    },

//滚动条    
scrollbar: {
    el: '.swiper-scrollbar',
    hide: true,
},






//其他参数说明

///////////////////////////***********************************************************//////////////////////////////////////

//设置为2后，Swiper初始化时显示的Slide成了第三个
initialSlide: 2,


//滑动方向，可设置为水平方向切换 horizontal 或垂直方向切换 vertical
direction: 'vertical',

//切换速度，即slider自动滑动开始到结束的时间（单位ms），也是触摸滑动时释放至贴合的时间。
speed:300,

//鼠标覆盖Swiper 时指针会变成手掌形状，拖动时指针会变成抓手形状
grabCursor : true,


//设置固定宽度，隐藏时初始化swiper
    width: 800, 
  //设置宽度为全屏  
    width: window.innerWidth,  //设置断点宽度
    breakpoints: {        1024: {
          width: 500,
        },        768: {
          width: undefined,//取消width，恢复自适应
    },  //窗口缩放时设置width
    on: {
       resize: function(){         
         this.params.width = window.innerWidth;         
         this.update();
       },
    } ,



//  breakpoints   断点设定，允许为不同的响应断点（屏幕尺寸）设置不同的参数。类似于CSS响应式布局的media only screen and (min-width: 480px)。只有部分不需要变换布局方式和逻辑结构的参数支持断点设定，如slidesPerView、slidesPerGroup、 spaceBetween、grid.rows、slidesPerGroupSkip、direction，而像loop、effect等则无效。

breakpoints: { 
      320: {  //当屏幕宽度大于等于320
        slidesPerView: 2,
        spaceBetween: 10
      },      768: {  //当屏幕宽度大于等于768 
        slidesPerView: 3,
        spaceBetween: 20
      },      1280: {  //当屏幕宽度大于等于1280
        slidesPerView: 4,
        spaceBetween: 30
      }
    }

    breakpoints: {      '@0.75': {  //当屏幕宽高比大于等于0.75
        slidesPerView: 2,
        spaceBetween: 20,
      },      '@1.00': {  //当屏幕宽高比大于等于1
        slidesPerView: 3,
        spaceBetween: 40,
      },      '@1.50': {  //当屏幕宽高比大于等于1.5
        slidesPerView: 4,
        spaceBetween: 50,
      }
    }    //Swiper4.x版本为小于
    breakpoints: {      1280: {  //当屏幕宽度小于等于1280
        slidesPerView: 4,
        spaceBetween: 30
      }      768: {  //当屏幕宽度小于等于768
        slidesPerView: 3,
        spaceBetween: 20,
      },      320: {  //当屏幕宽度小于等于320
        slidesPerView: 2,
        spaceBetween: 10,
      }
    } 

/////////////////////////////////////////////////////////////////////////////

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



//用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。请将子swiper的nested设置为true。
  //父swiper
  var mySwiper = new Swiper('#swiper1')    

  //子swiper
  var mySwiper2 = new Swiper('#swiper2', {  
    nested:true,
    resistanceRatio: 0,
  })

 
 
 //watchOverflow  当没有足够的slide切换时，例如只有1个slide，swiper会失效且隐藏导航等。默认不开启这个功能。
 //loop模式无效，因为会复制slide。
  
  watchOverflow: true,//因为仅有1个slide，swiper无效
  
  
  
  //init   当你创建一个Swiper实例时是否立即初始化。如果禁止了，可以稍后使用 mySwiper.init() 来初始化。
  
  
    var mySwiper = new Swiper('.swiper', {
    init: false,
  })
  $('#btn1').click(function(){
    mySwiper.init(); //点击之后才初始化
  })
  
  
  
  
  //默认当窗口(window) 尺寸发生变化时，比如屏幕旋转，Swiper会更新和重新计算(update和breakpoints等)。禁止可设为false。
  //此参数不可通过params 重写。
  
  updateOnWindowResize: true,
  

  
  
  //自动创建元素。启用后，Swiper 将使用 swiper-wrapper 元素自动包装slides，并为启用的导航、分页器和滚动条创建所需的元素（使用它们各自的参数对象或使用true））
  
  <div class="swiper"></div>
<script>  var mySwiper = new Swiper('.swiper', {
    pagination:{
      auto: true,//不可以定义el，并要增加auto属性
      type: 'fraction',
    },
    navigation: true,//不需要自动创建元素的话定义el就行
    scrollbar: true,
    createElements: true,//自动生成元素
  })
  mySwiper.addSlide(1, '<div class="swiper-slide">Slide 1</div>');
  mySwiper.addSlide(2, '<div class="swiper-slide">Slide 2</div>');
  mySwiper.addSlide(3, '<div class="swiper-slide">Slide 3</div>');
</script>
  
  
  
 
 
 
 //grid 多行多列布局
  
   slidesPerView: 3,
  grid: {
    fill: 'column',
    rows: 2,
  }, 
  
  
  
  
          
          
});

<!-- 左右切换按钮 -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

<!-- 分页器 -->
<div class="swiper-pagination"></div>

/* 按钮样式自定义 */
.swiper-container{--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
--swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
--swiper-navigation-size: 80px;/* 设置按钮大小 */}

/* 改变Swiper切换的时间曲线 */
.swiper-wrapper{
    /* transition-timing-function: ease-in-out; */
    /* transition-timing-function: ease-out; */
    transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

/* 分页器样式自定义 */
 .swiper-container{
    --swiper-theme-color: #ff6600;
    --swiper-pagination-color: #00ff33;/* 两种都可以 */
  }

<!doctype html>
<head>
<script src="js/jquery-latest.min.js"></script>
  <script src="js/jquery.slides.min.js"></script>
  <style>
    /* Prevents slides from flashing */防止闪烁
    #slides {
      display:none;
    }
  </style>  
</head>
<body>
    <div id="slides">
        <img src="http://placehold.it/940x528">
        <img src="http://placehold.it/940x528">
        <img src="http://placehold.it/940x528">
        <img src="http://placehold.it/940x528">
        <img src="http://placehold.it/940x528">
    </div>
    <script>
        $(function(){
          $("#slides").slidesjs({
            width: 940,   
            height: 450,
            navigation: {       //显示上一张下一张
                active: true
            },
            play: {                 //设置自动时的动画效果、自动播放、间隔、鼠标悬停、移出恢复时间
                active: false,
                // 生成下一张和上一张按钮。
                // 可以设置false，使用自己写的按钮来替代系统的按钮。
                // previous button: class="slidesjs-previous slidesjs-navigation"  自己写的按钮，上一张按钮的class=“”
                // next button: class="slidesjs-next slidesjs-navigation"  下一张按钮的class=""
                effect: "slide",
                // [string] Can be either "slide" or "fade".  效果滑动，也可以设置成fade幻灯
                interval: 2000,//动画间隔
                auto:true,//默认不自动进行播放！十分重要，设置成true。
                swap: false,//显示和隐藏按钮
                pauseOnHover: true,// 鼠标移入，暂停动画
                restartDelay: 2500,// 恢复动画间隔
            },
            effect: {    //特别注意：动画效果要与上面play中的属性保持一致，否则点击切换图片后，无法恢复动画
                slide:{
                speed:2000, //动画切换速度
                 crossfade: true// 交叉幻灯效果
            }}
    
          });
        });
    </script>
</body>

1.initialSlide——用来设定页面加载完成时，第几张图片先显示出来 

    取值-整数
    默认-0
    0表示第1张  1表示第2张 2表示第3张  。。。以此类推

2.direction——设置slide的滑动方向

    horizontal   水平  默认
    vertical     垂直

3.speed——滑动速度，即slide滑动开始到结束所用的时间（从左到右所用的时间）  
  
    取值举例:500      单位为 ms

4.autoplay——自动切换的时间间隔，不设定该参数，slide不会自动切换

    取值举例：2000 单位 ms

5.autoplayDisableOnInteraction——用户操作swiper之后是否禁止autoplay

     ture  停止   默认
     false  不会停止，但是会重新启动autoplay

6.autoplay

    如果设置为ture，当切换到最后一个slide时停止自动切换（loop模式下无效）
    false  继续切换  默认值

7.grabCursor

    ture  鼠标覆盖Swriper时指针会变成手掌状，拖动时指针会变成抓手形状（根据浏览器有所不同）

    false  默认值

8.autoHeight——自动高度

    ture  wrapper和container会随着当前slider的高度而发生变化
    false  默认值

9.nested

    用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。
    请将子swiper的nested设置为ture

    由于需要在slideChangeEnd时判断作用块，因此快速滑动时这个选项无效

1.freeMode    

    false  普通模式：slide滑动时只滑动一格，并自动贴合wrapper
    
    ture   free模式：slide会根据惯性滑动且不会自动贴合
    
2.freeModeMomentum——free模式动量    
    
    false  关闭动量，释放slide之后立即停止不会滑动
    ture   默认值
    
3.freeModeMomentumRatio——free模式动量值（移动惯量）

    值为number类型，当设置的值越大，释放slide时滑动的距离越大。
    
4.freeModeMomentumBounce——动量反弹。    
    
    false  禁用free模式下的动量反弹，slide通过惯性滑动到边缘时，无反弹效果
    ture   默认值，有反弹效果
    
5.freeModeMomentumBounceRatio——动量反弹的动量值

    值越大，产生的边界反弹效果越明显，反弹距离越大。6.freeModeSticky

    ture  使得freeMode也能自动贴合    
    false 默认值

1.centeredSlides

    ture   活动快居中    
    false  活动块居左，默认值
    
2.slidesPreView

    设置slider容器能够同时显示的slides数量（carousel模式）

    可以设置为number或者  auto
    auto  ——  根据slides的宽度来设定数量

    loop模式下，如果设置为auto，还需设置另外一个参数 loopedSlides
    
3.slidesPerGroup

    在carousel mode下定义slides的数量多少为一组。
    
4.slideBetween

    设置slide之间的距离（单位 px）
    
5.slidesPerColumn

    多行布局里面没列的slide数量
    
6.slidesPerColumnFill

    多行布局中以什么形式填充：    'column'(列)
    1     3     5 
    2     4     6
    'row'(行)
    1     2     3   
    4     5     6
    
7.slidesOffsetBefore

        设置slide与左边框预设偏移量（单位 px）

        类型  number   举例： 100
        
8.slidesOffsetAfter

        设置slide与右边框的预设偏移量（单位 px）

1.effect——slide的切换效果  
 
 "slide"——位移切换（默认）    
 "fade"——淡入    
 "cube"——方块   
  "coverflow"——3d流    
  "flip"——3d翻转
  
2.fade——fade效果参数。
  
  可选参数：crossFade(3.03启用)
    
    false(默认)——关闭淡出。过渡时，源slide透明度为1（不淡出），过度中的slide透明度从0->1（淡入），其他slide透明度为0。    
    ture(可选值)——开启淡出。过渡时，源slide透明度从1->0(淡出)，过渡中的slide透明度从0->1（淡入），其他slide透明度为0。

    举例：
    effect:'fade',
    fade:{
    crossFade:false
    }
    
3.cube——效果参数，可选值：

    slideShadows——开启slide阴影。默认ture。
    shadow——开启投影。默认ture。
    shadowOffset——投影距离。默认20，单位px。
    shadowScale投影缩放比例。默认0.94

    举例：
    effect : 'cube',
    cube: {
      slideShadows: true,
      shadow: true,
      shadowOffset: 100,
      shadowScale: 0.6
    }
    
4.coverflow——cover flow是类似于苹果将多首歌曲的封面以3D界面的形式显示出来的方式。coverflow效果参数，可选值：

    rotate：   slide做3d旋转时Y轴的旋转角度。默认50。
    stretch：  每个slide之间的拉伸值，越大slide靠得越紧。 默认0。
    depth：    slide的位置深度。值越大z轴距离越远，看起来越小。 默认100。
    modifier： depth和rotate和stretch的倍率，相当于depth*modifier、rotate*modifier、stretch*modifier，值越大这三个参数的效果越明显。默认1。
    slideShadows：开启slide阴影。默认 true。5.flip——共有两个参数可设置：

    slideShadows：slides的阴影。默认true。
    limitRotation：限制最大旋转角度为180度，默认true。

1.preventClicks

    true（默认）——当swiping时组织意外的链接点击。
    false

2.preventClicksPropagation——阻止click冒泡，拖动Swiper时组织click事件。

    true(默认)    false

3.slideToClickedSlide

    true——swiping时点击slide会过度到这个slide
    false（默认）

1.touchRatio——触摸距离与slide滑动距离的比率

    类型：number  默认：1  举例：0.5

    应用实例：利用tuchRatio制作与拖动方向相反的swiper——通过负数

2.simulateTouch

    true（默认）——swiper接受鼠标点击、拖动。
    false

3.onlyExternal

    true——slide无法拖动，只能使用扩展API函数，例如slideNext()或slidePrev()或slideTo()等改变slides滑动
    false（默认）

4.followFinger

    true（默认）
    false——拖动slide时它不会动，当释放slide才会切换

5.shortSwopes

    true（默认）
    false——惊醒快速短距离的拖动无法触发swiper

6.longSwipesRatio——进行longSwipes时触发swiper所需要的最小拖动距离比例，即定义longSwipes距离比例。值越大swiper所需距离越大。最大值0.5

7.threshold——拖动的临界值（单位为px），如果触摸距离小于该值滑块不会被拖动。

8.touchAngle——允许触发拖动的角度值。默认45度，即使触摸方向不是完全水平也能拖动slide。

9.longSwipes

    true（默认）
    false——进行长时间长距离的拖动无法触发Swiper。

10.longSwipesMs——定义longSwipes的时间（单位ms），超过则属于longSwipes。

11.touchMoveStopPropagation

    true（默认）——阻止touchmove冒泡事件。
    false

12.resistance——边缘抵抗。当swiper已经处于第一个或最后一个slide时，继续拖动Swiper会离开边界，释放后弹回。边缘抵抗就是拖离边界时的抵抗力。
    
    false——禁用，将slide拖离边缘时完全没有抗力。
    true（默认），将slide脱离边缘时有抗力，可以通过resistanceRatio设定抵抗力大小。

13.resistanceRatio——抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。

    默认0.85
    举例：0.7   0.9   0

14.iOSEdgeSwipeDetection

    true——开启IOS的UIWebView环境下的边缘探测。如果拖动是从屏幕边缘开始则不触发swiper。
    false（默认）

15.iOSEdgeSwipeThreshold——IOS的UIWebView环境下的边缘探测距离。如果拖动小于边缘探测距离则不触发swiper。

    类型：number    默认：20      举例：50

parallax  视差效果

设置为true开启Swiper的视差效果，内容在切换时更有层次感。
效果可以应用于container或slide的子元素。当应用于container的子元素（常用于视差背景图），每次切换时视差效果仅有设定值的1/(slide个数-1)

1.视差位移变化
    在所需要的元素上增加data-swiper-parallax属性（与Swiper切换方向相同）或data-swiper-parallax-x （x方向） data-swiper-parallax-y（y方向）
    data-swiper-parallax接受两种类型的参数。
          number（单位：px），如-300，从右边300px进入左边出去。
          percentage（百分比），移动距离=该元素宽度 * percentage。
2.视差透明度变化
    在所需要的元素上增加data-swiper-parallax-opacity属性。可选值0-1，如0.5，从半透明进入半透明出去。
    *设定透明度或缩放必须同时设定位移，否则无效(4.5.1前) <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
3.视差缩放变化
    在所需要的元素上增加data-swiper-parallax-scale属性。可选值如0.5，从一半大小进入一半大小出去。

还可通过data-swiper-parallax-duration设定视差动画持续时间（ms）。默认值是Swiper的speed，与切换时间同步。

<div class="swiper"><div style="background-image:url(/img/Parallax.jpg)" data-swiper-parallax="-23%" data-swiper-parallax-duration="3000"></div>
    <div class="swiper-wrapper">
       <div class="swiper-slide">
            <div class="title" data-swiper-parallax="-100">从右边100px开始进入</div>
            <div class="subtitle" data-swiper-parallax="-200">从右边200px开始进入</div>
            <div class="text" data-swiper-parallax="-300" data-swiper-parallax-duration="600">
              <p>从右边300px开始进入，时间600ms</p>
            </div>
            <div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" >透明度变化</div>
            <div data-swiper-parallax-scale="0.15" >缩放变化</div>
        </div>
    </div></div><script language="javascript"> 
    var mySwiper = new Swiper('.swiper',{
            parallax : true,
    })</script>