breakpoints
断点设定：根据屏幕宽度设置某参数为不同的值，类似于响应式布局的media only screen and (min-width: 480px)
只有部分不需要变换布局方式和逻辑结构的参数支持断点设定，如slidesPerView、slidesPerGroup、 spaceBetween、slidesPerColumn、slidesPerGroupSkip，而像loop、direction、effect等则无效。
5.3.0开始支持按宽高比例的断点。
*Swiper4与Swiper5判断方式相反，swiper4不支持slidesPerColumn。
只有部分不需要变换布局方式和逻辑结构的参数支持断点设定，如slidesPerView、slidesPerGroup、 spaceBetween、slidesPerColumn、slidesPerGroupSkip，而像loop、direction、effect等则无效。
5.3.0开始支持按宽高比例的断点。
*Swiper4与Swiper5判断方式相反，swiper4不支持slidesPerColumn。
breakpoints信息
- 类型：
- object
- 启用版本：
- 4.0.0
效果演示
缩放浏览器Swiper将重新排列
使用方法示例
<script>
var mySwiper = new Swiper('.swiper-container',{
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
