breakpoints
断点设定，允许为不同的响应断点（屏幕尺寸）设置不同的参数。类似于CSS响应式布局的media only screen and (min-width: 480px)。
只有部分不需要变换布局方式和逻辑结构的参数支持断点设定，如slidesPerView、slidesPerGroup、 spaceBetween、grid.rows、slidesPerGroupSkip、direction，而像loop、effect等则无效。
5.3.0开始支持按宽高比例的断点。
*Swiper4判断方式相反，swiper4不支持slidesPerColumn。
只有部分不需要变换布局方式和逻辑结构的参数支持断点设定，如slidesPerView、slidesPerGroup、 spaceBetween、grid.rows、slidesPerGroupSkip、direction，而像loop、effect等则无效。
5.3.0开始支持按宽高比例的断点。
*Swiper4判断方式相反，swiper4不支持slidesPerColumn。
breakpoints信息
- 类型：
- object
- 启用版本：
- 4.0.0
效果演示
缩小浏览器并刷新页面后Swiper将重新排列
使用方法示例
从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>转载原创文章请注明：文章转载自：Swiper中文网 [https://www.swiper.com.cn]
本文地址：https://www.swiper.com.cn/api/parameters/289.html
