JS 根据屏幕大小轮播图自适应

小渣渣

需求：在访问移动端时，轮播图只显示1条内容，在平板端时，显示2条内容，在PC端的时，显示4条内容。

首先，效果图图下：



我们知道 bootstrap 有网格系统，可以非常好的根据设备尺寸做自适应，原理其实就是 css 中的 media，但是，我轮播功能使用的是 Swiper 插件，插件是根据 js 参数设定的。

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

bootstrap 网格系统：



详情：https://getbootstrap.com/docs/4.5/layout/grid/

如果用纯 css 方式，代码如下（不适合我）：

登录可见。

js 是通过 Window matchMedia() 方法判断，进行参数调整，做自适应。代码如下：

登录可见。

（完）