swiper笔记（一）一般选项

一、使用方法

• html中，给容器加类【swiper-container】

<div class="swiper-wrapper" id="swiper-wrapper">
    <div class="swier-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
</div>

• js中，调用容器的类或id

<script>
    var swiper = new Swiper('.容器的类或id', {
     自定义内容
      },
    });
  </script>

二、Basic(一般选项)

• 设置初始页面

• initialSlide

• 类型number； 默认值0

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

• 设置滑动方向

• direction

• 类型string； 默认值horizontal(横向)；其他值vertical(纵向)

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

• 设置切换速度（单位ms）

• speed

• 类型number； 默认值300

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

• 设置鼠标样式

• grabCursor

• 类型boolean； 默认值false；其他值true(变成手掌形状，拖动时会变成抓手形状)

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

• 设置视差效果

• parallax

• 类型boolean； 默认值false（不开启）；其他值true(开启)
• 效果可以应用于container或slide的子元素。当应用于container的子元素（常用于视差背景图），每次切换时视差效果仅有设定值的slide个数-1分之1
• 【位移变化】-属性：data-swiper-parallax data-swiper-parallax-x data-swiper-parallax-y参数类型： number(单位：px) percentage(百分比)
• 【透明度变化】-属性：data-swiper-parallax-opacity 参数：0-1
• 【缩放变化】-属性：data-swiper-parallax-scale （移入移除缩放比）参数：0-1 属性：data-swiper-parallax-duration（动画持续时间ms） 默：认与speed同步
• 设定透明度或缩放必须同时设定位移，否则无效(4.0.5)

<!--html代码-->
<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>

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

• 设置是否使用flex布局

• setWrapperSize

• 类型boolean； 默认值false（不使用）；其他值true（使用）

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

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

• 设置虚拟位移（页面锁定）

• virtualTranslate

• 类型boolean； 默认值false；其他值true

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

• 添加语音提示

• a11y

• prevSlideMessage 类型：string 默认：'Previous slide' 在屏幕阅读器为上一页按钮添加信息。
• nextSlideMessage 类型：string 默认： 'Next slide' 在屏幕阅读器为下一页按钮添加信息。
• firstSlideMessage 类型：string 默认： 'This is the first slide' 在屏幕阅读器当处于第一个slide为上一页按钮添加信息。
• lastSlideMessage 类型：string 默认： 'This is the last slide' 在屏幕阅读器当处于最后一个slide为下一页按钮添加信息。
• paginationBulletMessage 类型：string 默认： 'Go to slide {{index}}' 在屏幕阅读器为分页器小点添加信息。
• notificationClass 类型：string 默认：'swiper-notification' A11y公告部分的类名。

<script> 
 var mySwiper = new Swiper('.swiper-container',{
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
    },
    a11y : {
      prevSlideMessage: 'Previous slide',
      nextSlideMessage: 'Next slide',
      firstSlideMessage: 'This is the first slide',
      lastSlideMessage: 'This is the last slide',
      paginationBulletMessage: 'Go to slide {{index}}',
      notificationClass: 'swiper-notification',
    },
  }) 
</script>

• 强制宽度，隐藏时初始化

• width

• 类型number； 其他值undefined
• 会使自适应失效，可设置undefined是这个参数无效

<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>

• 强制高度，隐藏时初始化（垂直切换时）

• height

• 类型number

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

• slide宽高取整

• roundLengths

• 类型boolean； 默认值false；其他值true

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

• 设置断点，类似媒体查询

• breakpoints

• 类似于media only screen and (max-width: 480px)

• breakpointsInverse

• 类似于media only screen and (min-width: 480px)
• 类型object
• 支持的参数：slidesPerView、slidesPerGroup、 spaceBetween
• 不支持的参数：slidesPerColumn、loop、direction、effect

<script> 
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
    }
  }
})
</script>

• 设置自动高度，随slide高度变化

• autoHeight

• 类型boolean； 默认值false；其他值true

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

• 外部分页器

• uniqueNavElements

• 类型boolean； 默认值true(不生效)；其他值false(生效)

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

• 嵌套同方向swiper

• nested

• 类型boolean； 默认值false(不生效)；其他值true(生效)

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

• 设置不能切换失效

• watchOverflow

• 类型boolean； 默认值false（不开启）；其他值true开启效)

<!--html代码-->
<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>

//js代码
<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',//自动隐藏
  },
})
var mySwiper = new Swiper('.swiper-container',{
initialSlide :2,})
</script>

• 注册事件

• on4.0开始使用 this

• 类型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>

• 触发回调函数

• runCallbacksOnInit

• 初始化slide不是第一个或者设置了loop: true，那么初始化时会触发一次 [Transition/SlideChange] [Start/End]
• 类型boolean； 默认值true（触发）；其他值false（不触发）

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

• 是否立即初始化

• init

• 类型boolean； 默认值true（立即初始化）；其他值false（暂不初始化）
• 如果禁止了，可使用mySwiper.init()来初始化

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

• 强制加载全部图片

• preloadImages

• 类型boolean； 默认值true（加载）；其他值：false（不加载）

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

• img加载完成重新初始化

• initialSlide

• 需要先设置preloadImages: true
• 类型boolean； 默认值true；其他值false

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