스크립트 & 소스코드 공유

不常用但偶尔必要的选项

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,//禁止鼠标模拟
})