Swiper Basic(基础参数) - breakpoints

断点设定,允许为不同的响应断点(屏幕尺寸)设置不同的参数。类似于CSS响应式布局的media only screen and (min-width: 480px)。
只有部分不需要变换布局方式和逻辑结构的参数支持断点设定,如slidesPerView、slidesPerGroup、 spaceBetween、grid.rows、slidesPerGroupSkip、direction,而像loop、effect等则无效。
5.3.0开始支持按宽高比例的断点。 *Swiper4判断方式相反,swiper4不支持slidesPerColumn。

breakpoints信息

类型:
object
启用版本:
4.0.0

效果演示

缩小浏览器并刷新页面后Swiper将重新排列

slider1
slider2
slider3
slider4
slider5
slider6
slider7
slider8
slider9

使用方法示例

从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>