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

2022-03-17 348 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,
          
        }
      },
  });

相关文章

如何使用AirDrop在Windows上与Apple设备进行数据互传
ksu模块-解锁system分区读写
旧手机+路由器=CPE(文末有rax3000m固件)
Apatch 如何安装模块
三星刷机各种小问题的解决方案参考
分享一个提高充电功率的方法仅限root亮屏(50w)