绝客BLog

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

2022-03-17 392 0

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

版本：swiper@6.7.0为实例；

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

绝客BLog

玩机技术&教程

0 0

宝塔环境下 Nginx 禁止直接通过访问服务器IP 包括80端口443端口

一款右侧粘性元素插件jquery.sticky.js

关于手机刷机和Root权限的一些杂谈

Win11新电脑2024最新优化项目设置

安卓手机系统跟踪文件删除办法

如何使用AirDrop在Windows上与Apple设备进行数据互传

ksu模块-解锁system分区读写

旧手机+路由器=CPE(文末有rax3000m固件)

绝客BLog

传递/最新/时刻

文章445 评论0

关于手机刷机和Root权限的一些杂谈

0条留言