Swiper Basic(基础参数) - breakpointsBase

设置断点功能(breakpoints)的计算基准。可以设为 windowcontainer
如果设置为window(默认),则断点键值基于当前窗口的宽度。此检测机制为 window.matchMedia ,不会根据窗口缩放来实时更新断点,需要刷新页面。
如果设置为container,则断点键值基于 Swiper 容器的宽度,当你改变宽度时断点会实时更新。
此功能目前处于测试阶段,Swiper Angular、React、Svelte 和 Vue 组件不支持。

breakpointsBase信息

类型:
string
默认:
window
举例:
container
启用版本:
6.5.0

效果演示

基于container
slider1
slider2
slider3
slider4
slider5
slider6
slider7
slider8
slider9
基于window
slider1
slider2
slider3
slider4
slider5
slider6
slider7
slider8
slider9
改变浏览器宽度后刷新

使用方法示例

从Swiper7开始,容器默认类名由'.swiper-container'变更为'.swiper'。
<script language="javascript"> 
  var mySwiper = new Swiper('.swiper', {
    slidesPerView: 1,
    spaceBetween: 40,
    breakpointsBase: 'container',
    breakpoints: { 
     //当swiper宽度大于等于768
      768: { 
        slidesPerView: 3,
        spaceBetween: 20
      }
    }
  })
</script>