Swiper5 设置按屏幕宽度响应式
Swiper5 设置按屏幕宽度响应式
4月3日 136 阅读
  • 首页
  • /
  • 笔记
  • /
  • 正文
  • 写前端页面时,添加轮播图是加分的。

    Swiper 是一个很不错的选择,但默认情况下,不会按照屏幕大小响应宽度,需要自己设定。以下是我在项目里用到的代码,它能设置按屏幕宽度响应式。

    breakpoints: {
        372: {
            slidesPerView: 2
        },
        576: {
            slidesPerView: 3
        },
        768: {
            slidesPerView: 5
        },
        992: {
            slidesPerView: 7
        }
    }
    0

    评论 (3)

    取消
    1. 头像
      腾先生
      中国上海市 · iPhone · Safari

      每天学习一下经验表情表情

      回复
    2. 头像
      老张博客
      广东省广州市 · Windows 10 · Google Chrome

      唉,这么简单的代码我都看不懂哟。

      回复
      1. 头像
        小王先森
        @老张博客:
        贵州省铜仁市 · Windows 10 · Google Chrome

        谦虚了吧!能看出简单,说明你懂了。

        回复