1.基础配置
配置选项 | 含义 | 默认值 | 注意 |
---|---|---|---|
initialSlide | 设定初始化时slide的索引。Swiper默认初始化时显示第一个slide,有时想初始化时直接显示其他slide,可以做此设置 | 0 | |
speed | 切换速度,即slider自动滑动开始到结束的时间(单位ms),也是触摸滑动时释放至贴合的时间 | 300 | |
grabCursor | 设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。 | false | |
init | 当创建一个Swiper实例时是否立即初始化。如果禁止了,可以稍后使用mySwiper.init()来初始化 | true | |
autoHeight | 自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。 | false | |
width | 强制Swiper的宽度(px) | 500 | (1) 当Swiper在隐藏状态下初始化时用此属性。(2)设置测属性后自适应宽度失效(3)可设置为undefined使这个参数无效。 |
height | 强制Swiper的高度(px) | 300 | (1)当你的Swiper在隐藏状态下初始化时且切换方向为垂直才用得上(2)设置测属性后自适应高度失效 |
direction | Swiper的滑动方向,水平方向切换(horizontal)或垂直方向切换(vertical) | horizontal | (1)可使用swiper.changeDirection()方法动态更改切换方向(2)可使用断点(breakpoints,4.5.0后)设置不同分辨率下的切换方向 |
setWrapperSize | 开启这个设定会在Wrapper上添加等于slides相加的宽或高 | false | 用于浏览器兼容。,在对flexbox布局的支持不是很好的浏览器中可能需要用到。 |
uniqueNavElements | 独立分页元素。当你的控制组件放在container外面的时候用 | true | 需要在container之外添加分页元素 |
runCallbacksOnInit | 当初始化slide不是第一个(例initialSlide:2)或者设置了loop: true时,swiper初始化时会触发一次回调函数 | true | 配和on属性使用 |
on | 注册事件 | ||
watchOverflow | 当没有足够的slide切换时,例如只有1个slide,swiper会失效且隐藏导航等。默认不开启这个功能 | false | loop模式无效,因为会复制slide |
preloadImages | Swiper会强制加载所有图片后才初始化 | true | 可以配合updateOnImagesReady一起使用 |
updateOnImagesReady | 当所有的内嵌图像(img标签)加载完成后Swiper会重新初始化 | true | 使用此选项需要先开启preloadImages: true |
updateOnWindowResize | 默认当窗口(window) 尺寸发生变化时,比如屏幕旋转,Swiper会更新和重新计算(update和breakpoints等) | true | 设置该属性为false时,breakpoints 失效 |
2.parallax配置
(1)Swiper的视差效果,内容在切换时更有层次感。
(2)效果可以应用于container或slide的子元素。
(3)注意:设定透明度或缩放必须同时设定位移,否则无效
属性 | 含义 | 参数类型/取值范围 |
---|---|---|
data-swiper-parallax-x (x方向)/data-swiper-parallax-y(y方向) | 移动开始的位置 | number(px)/% |
data-swiper-parallax-opacity | 视差透明度变化 | 0-1 |
data-swiper-parallax-scale | 视差缩放变化 | 0-1 |
data-swiper-parallax-duration | 视差动画持续时间 | number(ms)–默认值是Swiper的speed,与切换时间同步 |
.swiper-container {
/* 可见容器大小 */
width: 250px;
height: 300px;
text-align: center;
position: relative;
}
.swiper-bg {
position: absolute;
/* 背景图片大小 */
width: 600px;
height: 100%;
background: url(../img/swiper1.png) no-repeat center center;
background-size: 100% 100%;
}
<div class="swiper-container" id="mySwiper2">
<!--背景图片不换,但是有滑动效果-->
<div class="swiper-bg" data-swiper-parallax="-50%" data-swiper-parallax-duration="3000"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div data-swiper-parallax="-100">从右边100px开始进入</div>
<div data-swiper-parallax="-300" data-swiper-parallax-duration="3000">
<p>从右边300px开始进入,时间3000ms</p>
</div>
</div>
<div class="swiper-slide">
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.1" data-swiper-parallax-duration="5000">透明度变化 0.1</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.2" data-swiper-parallax-duration="5000">透明度变化 0.2</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.3" data-swiper-parallax-duration="5000">透明度变化 0.3</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.4" data-swiper-parallax-duration="5000">透明度变化 0.4</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.5" data-swiper-parallax-duration="5000">透明度变化 0.5</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.6" data-swiper-parallax-duration="5000">透明度变化 0.6</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.7" data-swiper-parallax-duration="5000">透明度变化 0.7</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.8" data-swiper-parallax-duration="5000">透明度变化 0.8</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="0.9" data-swiper-parallax-duration="5000">透明度变化 0.9</div>
<div data-swiper-parallax="0" data-swiper-parallax-opacity="1.0" data-swiper-parallax-duration="5000">透明度变化 1.0</div>
</div>
<div class="swiper-slide">
<div data-swiper-parallax="0" data-swiper-parallax-scale="0.1" data-swiper-parallax-duration="5000">缩放变化 0.1</div>
<div data-swiper-parallax="0" data-swiper-parallax-scale="0.2" data-swiper-parallax-duration="5000">缩放变化 0.2</div>
<div data-swiper-parallax="0" data-swiper-parallax-scale="0.3" data-swiper-parallax-duration="5000">缩放变化 0.3</div>
<div data-swiper-parallax="0" data-swiper-parallax-scale="0.4" data-swiper-parallax-duration="5000">缩放变化 0.4</div>
<div data-swiper-parallax="0" data-swiper-parallax-scale="0.5" data-swiper-parallax-duration="5000">缩放变化 0.5</div>
<div data-swiper-parallax="0" data-swiper-parallax-scale="0.6" data-swiper-parallax-duration="5000">缩放变化 0.6</div>
<div data-swiper-parallax="0" data-swiper-parallax-scale="0.7" data-swiper-parallax-duration="5000">缩放变化 0.7</div>
<div data-swiper-parallax="0" data-swiper-parallax-scale="0.8" data-swiper-parallax-duration="5000">缩放变化 0.8</div>
<div data-swiper-parallax="0" data-swiper-parallax-scale="0.9" data-swiper-parallax-duration="5000">缩放变化 0.9</div>
<div data-swiper-parallax="0" data-swiper-parallax-scale="1.0" data-swiper-parallax-duration="5000">缩放变化 1.0</div>
</div>
</div>
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
var mySwiper = new Swiper('#mySwiper2', {
parallax: true,
speed: 3000,
grabCursor: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
该例子中背景图片的大小必须比可视范围的大小大
3.breakpoints配置
断点设定:根据屏幕宽度设置某参数为不同的值,类似于响应式布局的media only screen and (min-width: 480px)
注:3种配比方式,但是都和屏幕有关,和框架大小无关。
way-1:根据屏幕宽高比设置
way-2:根据屏幕大小设置(大于等于)
way-3:根据屏幕大小设置(小于等于)
.swiper-container {
width: 600px;
height: 300px;
text-align: center;
}
<div class="swiper-container" id="mySwiper3">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: #f00">Slide 1</div>
<div class="swiper-slide" style="background-color: #0f0">Slide 2</div>
<div class="swiper-slide" style="background-color: #00f">Slide 3</div>
<div class="swiper-slide" style="background-color: #ff0">Slide 4</div>
<div class="swiper-slide" style="background-color: #f0f">Slide 5</div>
<div class="swiper-slide" style="background-color: #0ff">Slide 6</div>
<div class="swiper-slide" style="background-color: #fff">Slide 7</div>
<div class="swiper-slide" style="background-color: #aaa">Slide 8</div>
<div class="swiper-slide" style="background-color: #0aa">Slide 9</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 mySwiper3 = new Swiper('#mySwiper3', {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
// breakpoints: {
// '@0.75': { //当屏幕宽高比大于等于0.75
// slidesPerView: 2,
// spaceBetween: 20,
// },
// '@1.00': { //当屏幕宽高比大于等于1
// slidesPerView: 3,
// spaceBetween: 40,
// },
// '@1.50': { //当屏幕宽高比大于等于1.5
// slidesPerView: 4,
// spaceBetween: 50,
// },
// },
breakpoints: {
1280: { //当屏幕宽度小于等于1280
slidesPerView: 2,
spaceBetween: 50
},
768: { //当屏幕宽度小于等于768
slidesPerView: 2,
spaceBetween: 20,
},
320: { //当屏幕宽度小于等于320
slidesPerView: 1,
spaceBetween: 10,
}
},
// breakpoints: {
// 320: { //当屏幕宽度大于等于320
// slidesPerView: 2,
// spaceBetween: 10
// },
// 768: { //当屏幕宽度大于等于768
// slidesPerView: 3,
// spaceBetween: 20
// },
// 1280: { //当屏幕宽度大于等于1280
// slidesPerView: 4,
// spaceBetween: 30
// }
// }
})
</script>