绝客BLog

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

2022-03-17 937 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

为什么推荐买原厂固态，黑片白片又是什么?

Redmi K50 Ultra OS 1.0.8.0.ULFCNXM 官改

如何使用WatchOS Pro在本地开启

如何解决小米电脑管家无法使用教程

随身wifi 中兴mf761w/f.f231zc全功能后台修复频段显示

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

发布评论取消回复

绝客BLog

传递/最新/时刻

文章457 评论0

为什么推荐买原厂固态，黑片白片又是什么?

0条留言