swiper.js 在不同分辨率(媒体查询)加载不同数目轮播

2022-03-17 469 0

有时候需要 swiper.js 再不同分辨率(媒体查询)加载不同数目轮播,适应响应式端。

版本:swiper@6.7.0为实例;

var mySwiper_products_right = new Swiper('.swiper-container-products-right', {
      loop: true,
      loopFillGroupWithBlank: true,
      speed:1000,
      autoplay: {
        delay: 2800,//3秒切换一次
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        dynamicBullets: true,
        dynamicMainBullets: 3
      },
      // 媒体查询
      breakpoints: { 
        320: {  //当屏幕宽度大于等于320
          slidesPerView: 1,//加载一个轮播
          slidesPerGroup: 1,//定义slides的数量多少为一组
        },
        768: {  //当屏幕宽度大于等于768 
          slidesPerView: 2,
          slidesPerGroup: 2,
         
        },
        1280: {  //当屏幕宽度大于等于1280
          slidesPerView: 3,
          slidesPerGroup: 3,
          
        }
      },
  });

相关文章

Redmi K50 Ultra OS 1.0.8.0.ULFCNXM 官改
如何使用WatchOS Pro在本地开启
如何解决小米电脑管家无法使用教程
随身wifi 中兴mf761w/f.f231zc全功能后台修复频段显示
关于手机刷机和Root权限的一些杂谈
Win11新电脑2024最新优化项目设置

发布评论