vue项目使用swiper设置按屏幕宽度响应式

最新推荐文章于 2024-07-17 01:05:54 发布

平井缘

最新推荐文章于 2024-07-17 01:05:54 发布

阅读量2.6k

点赞数 4

本文链接：https://blog.csdn.net/weixin_45693257/article/details/108862977

版权

Swiper5 响应式布局滑动视图屏幕适配布局管理

关键词由CSDN通过智能技术生成

效果图如下：
在这里插入图片描述

使用的版本为swiper5

代码如下：

breakpoints: {
  320: {  //当屏幕宽度大于等于320
    slidesPerView: 1,
    spaceBetween: 10
  },
  776: {  //当屏幕宽度大于等于776
    slidesPerView: 2,
    spaceBetween: 60
  },
  1000: {  //当屏幕宽度大于等于1000
    slidesPerView: 3,
    spaceBetween: 60
  },
  1200: {  //当屏幕宽度大于等于1200
    slidesPerView: 4,
    spaceBetween: 60
  }
}