断点设定,允许为不同的响应断点(屏幕尺寸)设置不同的参数。类似于CSS响应式布局的media only screen and (min-width: 480px)。
只有部分不需要变换布局方式和逻辑结构的参数支持断点设定,如slidesPerView、slidesPerGroup、 spaceBetween、grid.rows、slidesPerGroupSkip、direction,而像loop、effect等则无效。
使用方法示例:
从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script>
var mySwiper = new Swiper('.swiper', {
slidesPerView: 1,
spaceBetween: 40,
breakpoints: {
320: { //当屏幕宽度大于等于320
slidesPerView: 2,
spaceBetween: 10
},
768: { //当屏幕宽度大于等于768
slidesPerView: 3,
spaceBetween: 20
},
1280: { //当屏幕宽度大于等于1280
slidesPerView: 4,
spaceBetween: 30
}
}
breakpoints: {
'@0.75': { //当屏幕宽高比大于等于0.75
slidesPerView: 2,
spaceBetween: 20,
},
'@1.00': { //当屏幕宽高比大于等于1
slidesPerView: 3,
spaceBetween: 40,
},
'@1.50': { //当屏幕宽高比大于等于1.5
slidesPerView: 4,
spaceBetween: 50,
}
}
//Swiper4.x版本为小于
breakpoints: {
1280: { //当屏幕宽度小于等于1280
slidesPerView: 4,
spaceBetween: 30
}
768: { //当屏幕宽度小于等于768
slidesPerView: 3,
spaceBetween: 20,
},
320: { //当屏幕宽度小于等于320
slidesPerView: 2,
spaceBetween: 10,
}
}
})
</script>
例子:
<script type="text/javascript">
var mySwiper = new Swiper('.in-case-con .swiper-container', {
slidesPerView: 5,
spaceBetween: 30,
breakpoints: {
576: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 20,
},
992: {
slidesPerView: 4,
spaceBetween: 30,
},
1200: {
slidesPerView: 5,
spaceBetween: 30,
}
},
speed: 400,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
loop : true,
pagination: {
el: '.in-case-con .pagination',
type: 'bullets',
clickable :true,
},
})
</script>