<div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>

二、Swiper 初始化

1、new Swiper(swiperContainer, parameters)

初始化一个Swiper，返回初始化后的Swiper实例。

swiperContainer 必须，是Swiper容器的css选择器；parameters 可选，是Swiper的个性化配置。

一个页面中引用多个Swiper，需要给每个容器加上id或class区分，默认的类名.swiper-container需要保留。

<div id="swiper1" class="swiper-container"> ... <div>
<div id="swiper2" class="swiper-container"> ... <div>

<script>
var mySwiper1 = new Swiper('#swiper1');
var mySwiper2 = new Swiper('#swiper2');
</script>

三、Basic (Swiper一般选项)

1、initialSlide

初始化 slide 索引，可以理解成初始幻灯片。类型：number，默认：0。

<script> 
var mySwiper = new Swiper('.swiper-container',{
    initialSlide: 2,
})
</script>

2、direction

Slides 滑动的方向，默认水平方向 horizontal，垂直方向 vertical（需要设置容器的高度）。类型： sring。

<script> 
var mySwiper = new Swiper('.swiper-container',{
    direction: 'vertical', 
})
</script>

3、speed

切换速度，类型：number，默认：300，单位毫秒 ms。

<script> 
var mySwiper = new Swiper('.swiper-container',{
    speed: 300, 
})
</script>

4、grabCursor

设置为true时，鼠标指针变成手掌形状。类型：boolean，默认false。

<script> 
var mySwiper = new Swiper('.swiper-container',{
    grabCursor: false, 
})
</script>

5、parallax

设置为 true 开启视差效果。类型：boolean，默认：false。
可应用于container或slide的子元素。当应用于container的子元素（常用于视差背景图），每次切换时视差效果仅有设定值 slide 的个数-1分之1。

5-1、视差位移变化

在需要的元素上增加 data-swiper-parallax 属性（与Swiper切换方向相同）或 data-swiper-parallax-x，data-swiper-parallax-y。

data-swiper-parallax接受两种类型的参数：

number（单位：px），如-300，从右边300px进入左边出去。
percentage（百分比），移动距离=该元素宽度 * percentage。

5-2、视差透明度变化

data-swiper-parallax-opacity，可选值0-1，如0.5，从半透明进入半透明出去。

5-3、视差缩放变化

data-swiper-parallax-scale，可选值如0.5，从一半大小进入一半大小出去

5-4、视差动画持续时间（ms）

data-swiper-parallax-duration，默认值是 Swiper 的 speed，与切换时间同步。

设定视差透明度或缩放必须同时设定位移，否则无效。

<div class="swiper-container">
<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> 
var mySwiper = new Swiper('.swiper-container',{
   parallax : true,
})
</script>

6、setWrapperSize

Swiper使用display:flex布局，开启setWrapperSize设定会在Wrapper上添加等于slides相加的宽或高。类型：boolean，默认：false。

<script>
var mySwiper = new Swiper('.swiper-container',{
    setWrapperSize: true, 
})

//获取全部slide相加(wrapper)的宽度
console.log(mySwiper.$wrapperEl.css('width')); 
console.log(mySwiper.virtualSize);
</script>

当包装容器Wrapper使用display:flex布局时，需要配置参数setWrapperSize: true，它可以获取到全部slide相加的宽度和高度。

7、virtualTranslate

虚拟位移。启用virtualTranslate参数，Slide不会移动，但是Swiper还是在运行，例如progress，active-slide，各种回调等。
类型：boolean，默认：false。演示效果：滑动Swiper，slide静止不移动，Swiper切换了。

<script> 
var mySwiper = new Swiper('.swiper-container',{
  virtualTranslate : true,
})
//mySwiper.params.virtualTranslate=true;
</script>

8、a11y

辅助，无障碍阅读。

9、width

强制Swiper的宽度，当你的Swiper在隐藏状态下初始化时用得上，这个参数会使自适应失效。可设置为undefined使这个参数无效。类型：number。

<script> 
var mySwiper = new Swiper('.swiper-container',{
  //设置固定宽度，隐藏时初始化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();
       },
    } ,
})

/*隐藏状态显示后再初始化swiper
function initSwiper(){
  var mySwiper = new Swiper ('.swiper-container', {
    ...
  }
}
$(".page").css('display','block');
setTimeout('initSwiper()', 100);
*/
</script>

10、height

强制Swiper的高度(px)，当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上。这个参数会使自适应失效。类型：number。

<script>
var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  height: 300,//你的slide高度
  //全屏  height : window.innerHeight,
}) 
</script>

11、roundLengths

如果设置为true，将slide的宽和高取整四舍五入，以防止某些分辨率的屏幕上文字或边框模糊。类型：boolean，默认：false。

<script> 
var mySwiper = new Swiper('.swiper-container',{
  roundLengths : true, 
})
</script>

12、breakpoints

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

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 4,
  spaceBetween: 40,
 
  breakpoints: { 
    //当宽度小于等于320
    320: {
      slidesPerView: 1,
      spaceBetween: 10
    },
   //当宽度小于等于480
    480: { 
      slidesPerView: 2,
      spaceBetween: 20
    },
    //当宽度小于等于640
    640: {
      slidesPerView: 3,
      spaceBetween: 30
    }
  }
})

13、breakpointsInverse

开启后，breakpoints 将以反方向计算，类似于类似于media only screen and (min-width: 480px)。类型：Boolean，默认：false。

<script>
var swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 40,
  breakpointsInverse: true,
  breakpoints: { 
    //当宽度大于等于320
    320: {
      slidesPerView: 2,
      spaceBetween: 10
    },
   //当宽度大于等于480
    480: { 
      slidesPerView: 3,
      spaceBetween: 20
    },
    //当宽度大于等于640
    640: {
      slidesPerView: 4,
      spaceBetween: 30
    }
  }
})
</script>

14、autoHeight

自动高度。设为true，container、wrapper会随当前slide的高度发生变化。类型：boolean，默认 false。

<script>
var swiper = new Swiper('.swiper-container', {
  autoHeight: true, //高度随内容变化
});
</script>

15、uniqueNavElements

独立分页元素，当启用（默认）并且分页元素的传入值为字符串时。swiper会优先查找子元素匹配这些元素。可应用于分页器，前进后退按钮和滚动条。当你的控件组件放在container外面的时候，需要用到。类型：boolean，默认：true。

默认为true时，仅本swiper的container内的分页器有效，设置为false后，container以外的分页器也生效了。

<script> 
var mySwiper = new Swiper('.swiper-container',{
  pagination: {
    el: '.swiper-pagination',
  },
  uniqueNavElements: false,
})
</script>

16、nested

嵌套相同方向的swiper，当切换到swiper时父swiper停止切换。将子swiper的nested设置为true。由于需要在slideChangeEnd时判断作用块，因此快速滑动时这个选项无效。类型：Boolean，默认：false。

<script> 
var mySwiper = new Swiper('#swiper-container1')//父swiper
var mySwiper2 = new Swiper('#swiper-container2',{//子swiper
  nested:true,
  resistanceRatio: 0,
})
</script>

17、runCallbacksOnlnit

初始化slide不是第一个或者设置了loop:true，初始化时会触发一次[ Transition/SlideChange] [ Start/End ] 回调函数，如果不想触发，设置为 false。类型： boolean，默认：true.

<script>
var mySwiper = new Swiper('.swiper-container',{
  loop:true,
  //or initialSlide: 2,
  runCallbacksOnInit : false,//初始化时不触发slideChange
  on:{
    slideChangeTransitionStart:function(){
      alert('初始化时触发了一次回调');
    },
  },
})
</script>

18、watchOverflow

当没有足够的slide切换时，只有1个slide，swiper会失效且隐藏导航，默认不开启这个功能。类型：boolean，默认false。

loop模式无效，因为会复制slide。

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide blue-slide">slider1</div>
	</div>
	<div class="swiper-pagination"></div>
	<div class="swiper-button-prev"></div>
	<div class="swiper-button-next"></div>
	<div class="swiper-scrollbar"></div>
</div>

<script> 
var mySwiper = new Swiper('.swiper-container',{
  watchOverflow: true,//因为仅有1个slide，swiper无效
  navigation: {
    nextEl: '.swiper-button-next',//自动隐藏
    prevEl: '.swiper-button-prev',//自动隐藏
  },
  pagination: {
    el: '.swiper-pagination',//自动隐藏
  },
  scrollbar: {
    el: '.swiper-scrollbar',//自动隐藏
  },
})
</script>

19、on

注册事件，swiper4.0开始使用关键词this指代swiper实例。类型：object。

<script>
var mySwiper = new Swiper('.swiper-container', {
  on: {
    slideChange: function () {
      console.log(this.activeIndex);
    },
  },
};
//或者
var mySwiper = new Swiper('.swiper-container');
mySwiper.on('slideChange', function () {
  //...
});
</script>

20、init

当你创建一个 Swiper 实例时是否立即初始化。如果禁止了，可以稍后使用 mySwiper.init() 来初始化。类型：boolean，默认：true。

<script>
var mySwiper = new Swiper('.swiper-container',{
  init: false,
})
mySwiper.init();//现在才初始化
</script>

21、preloadImages

Swiper会强制加载所有图片。类型：Boolean，默认：true。

<script>
var mySwiper = new Swiper('.swiper-container',{
  preloadImages:false,
})
</script>

22、updateOnImagesReady

当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。前提开始preloadImages:true。类型：boolean，默认：true。

<script>
var mySwiper = new Swiper('.swiper-container',{
  updateOnImagesReady : true,
})
</script>

注：swiper.min.css，swiper.min.js文件直接上Swiper官网下载。

参考Swiper API文档：https://www.swiper.com.cn/api/navigation/368.html

码农公寓

一、swiper 结构