【插件的使用】——Swiper插件的应用

Swiper可以实现各种样式的轮播图效果。是一款非常好用的触摸滑动插件。

使用Swiper需要进入官网：

如何使用Swiper插件

官网有详细的教程：

1.下载

（如果不想下载文件，下面有另外使用的方法，但会存在兼容性问题，需要另外配置，这里不做详解，建议还是下载文件）首先下载Swiper文件： 

我们需要下载更新完毕且稳定的插件，这里选择下载Swiper6.

 如果不想下载，也可以使用CDN加速，点击这里

 将这行代码引入自己的代码中，但是需要改成对应的版本号。

2.引入min.js和min.css到自己的文件

接下来：

完整版本方便我们学习源码，但在实际开发时将压缩版本min.js和min.css引入到自己的文件中即可，文件越小自然越好。

这里补充一下：最好的使用方式应该是：下载Swiper文件后->在文件中找到demo->然后去原文件找到对应想要效果的demo（就是去官网查看效果，找到自己想要的样式，再回到自己的demo文件中找到对应那个样式文件）->copy代码，这样得到的代码就是对应版本的代码，就不会存在兼容性问题。（这里不直接使用官网样式的代码是因为和我们自己版本号有时候是不对应的存在兼容性问题，也不好修改）

 我们将压缩版本min.js和min.css引入到自己js和css文件中：

创建自己的项目文件，名为swiper.html，如上图。然后在下图位置引入文件：

3.添加HTML内容

 

这时候如果我们不知道自己的Swiper文件版本是7还是6，可以去demo中看代码到底写的是'.swiper'还是'.swiper-container'.

随便点开一个，查看源码。

引入如下 ：(我们下载的版本是6的，需要改成.swiper-container)

4.初始化Swiper

大小我们稍后设置

将官网的4中代码copy到我们自己的文件中：

注意修改成.swiper-container

 但是当我们引入完成发现页面加载是，有问题的，是因为我们没有引入css样式，没有给swiper设置位置大小，官网虽然说可以不设置，但这样是不行的。接下来设置轮播图的大小：

效果如下：

这是效果看到的是垂直滚动的效果，是因为js代码中，布局是垂直滚动的，只需要把：vertical删除即可。

 效果：

 这样一个简单的轮播图样式就弄好啦，可以自行添加修改样式。