不常用但偶尔必要的选项
roundLengths
如果设置为true，则将slide的宽和高取整(四舍五入)，以防止某些分辨率的屏幕上文字或边界(border)模糊。
例如当你设定slidesPerView : 3时，则可能出现slide的宽度为341.33px，开启roundLengths后宽度取整数341px。
var mySwiper = new Swiper('.swiper-container',{
roundLengths : true,
})
grabCursor
该选项给Swiper用户提供小小的贴心应用，设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不同）
var mySwiper = new Swiper('.swiper-container',{
grabCursor : true,
})
parallax
设置为true开启Swiper的视差效果，内容在切换时更有层次感。
效果可以应用于container或slide的子元素。当应用于container的子元素（常用于视差背景图），每次切换时视差效果仅有设定值的slide个数-1分之1
<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 language="javascript">
var mySwiper = new Swiper('.swiper-container',{
parallax : true,
})
</script>
autoHeight
自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
var swiper = new Swiper('.swiper-container', {
autoHeight: true, //高度随内容变化
});
nested
用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。
请将子swiper的nested设置为true。
由于需要在slideChangeEnd时判断作用块，因此快速滑动时这个选项无效。
var mySwiper = new Swiper('#swiper-container1')//父swiper
var mySwiper2 = new Swiper('#swiper-container2',{//子swiper
nested:true,
resistanceRatio: 0,
})
watchOverflow
当没有足够的slide切换时，例如只有1个slide，swiper会失效且隐藏导航等。默认不开启这个功能。
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',//自动隐藏
},
})
</scrip>
preloadImages
默认为true，Swiper会强制加载所有图片后才初始化。
var mySwiper = new Swiper('.swiper-container',{
preloadImages:false,
})
updateOnImagesReady
当所有的内嵌图像（img标签）加载完成后Swiper会重新初始化。使用此选项需要先开启preloadImages: true
var mySwiper = new Swiper('.swiper-container',{
updateOnImagesReady : true,
})
centeredSlides
设定为true时，active slide会居中，而不是默认状态下的居左。
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
centeredSlides : true,
})
</script>
<style type="text/css">
.swiper-slide-active{
background:#ff6600;
color:#fff;
}
</style>
centeredSlidesBounds
当设置了Active Slide居中后，还可以配合设置此参数，使得第一个和最后一个Slide 始终贴合边缘。
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
centeredSlides : true,
centeredSlidesBounds: true,
})
</script>
<style type="text/css">
.swiper-slide-active{
background:#ff6600;
color:#fff;
}
</style>
slidesPerGroup
在carousel mode下定义slides的数量多少为一组。
var mySwiper = new Swiper('.swiper-container',{
slidesPerView : 3,
slidesPerGroup : 3,
})
slidesPerColumn
设置多行布局里面每列的slide数量。
当slidesPerColumnFill:column，需要同时设定swiper-container的高度。
slidesPerColumn目前还不兼容loop模式（loop: true）。
在slide数量不足以填满的情况下可能会出现布局不理想（例如4行3列，但是只有10个slide），建议使用空的slide将数量补足。
var mySwiper = new Swiper('.swiper-container',{
slidesPerView: 3,//一行显示3个
slidesPerColumn: 2,//显示2行
})
slidesPerColumnFill
多行布局中以什么形式填充
var mySwiper = new Swiper('.swiper-container',{
slidesPerView: 3,
slidesPerColumn : 2,
slidesPerColumnFill : 'row',
})
slidesOffsetBefore
设定slide与左边框的预设偏移量（单位px）。
var mySwiper = new Swiper('.swiper-container',{
slidesOffsetBefore : 100,
})
slidesOffsetAfter
设定slide与右边框的预设偏移量（单位px）。
var mySwiper = new Swiper('.swiper-container',{
slidesOffsetAfter : 100,
})
simulateTouch
鼠标模拟手机触摸。默认为true，Swiper接受鼠标点击、拖动。
var mySwiper = new Swiper('.swiper-container',{
simulateTouch : false,//禁止鼠标模拟
})