swiper插件的使用

官方网址：https://www.swiper.com.cn/

1、点击导航栏，获取Swiper里边的下载Swiper

2、选择要下载的版本【本次案例版本5.4.5】，然后解压缩文件夹，拿到swiper.min.js和swiper.min.css文件，放到项目对应的css文件和js文件里。

注意：从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。

3、在官网的在线演示栏目，选择与项目需求类似的案例效果，【完全一样的案例效果，比较少，都需要自己修改的】，然后选择右上角的在新窗口打开。

4、右键查看网页源代码。

5、复制html页面代码，放到自己项目里，我这里单独建了一个div专门放轮播图的。

6、复制样式页面代码，放到自己项目里。

7、复制js部分代码，并且放到自己项目里。

8、复制完成之后，此时页面展示效果，如下图所示：

9、页面效果并不是自己想要的，例如分页器有小圆点样式，我们打开官网的API文档，找到pagination（分页器），这里我们不需要小圆点，所以在js里边直接删掉这个配置即可。

10、这里我们需要轮播图两侧是带箭头的，现在没有，看API里边猜测应该是，navigation前进后退按钮，如果猜不到的话，可以在官网的案例中，找到左右两侧带箭头的，查看它的源代码中的js部分，看看有添加什么属性，html和css，也要查看相应增加。

11、将样式为swiper-slide里面的内容，换成我们的内容，并且调整样式，添加flex-direction: column;调整成上边图片，下边文字的效果，并且需要调整图片和文字的大小等等。

12、还有细节部分需要调整，比如中间聚焦的图片会被右侧图片压住，需要提升层级z-index，两边的图片透明度需要降低些opacity，要与中间图片形成鲜明对比。

13、整个轮播图的宽度定位到540像素，箭头拿到整个图片的外侧。

14、按照需要调整细节，修改后如下图所示：