使用padding-top做轮播图，并实现多个轮播图的同时控制

1、给swiper轮播图制作，保证其按比例缩小放大。

父类容器div：positon:relative;

                  padding-top:百分比（觉得图片宽高比）

                  width：100%(也可以是其他百分比)

（1）图片：swiper-container，或者是其他的类名：

                  position:absolute;

                  top:0;left:0;

                  width:100%;

                  height:100%;

swiper-slide里图片的属性：必须width:100%;height:100%;

若想设置一些文字在图片上，文字为swiper-slider的子容器，用一个div，里面放文字的span或者h标签，

设置swiper-slide或其他类名：display居中：

                  display: flex;

                  flex-direction: column;

                  align-items: flex-end;

                  justify-content: flex-end;

（2）文字，比如我想在轮播图下面放一排文字，实现文字和轮播图的双重控制，还是属于swiper容器里的，所以要写在position:relative的父类容器下，与图片的swiper-container是并列、同级的，

即<div class="banner">

<div class="img_area"></div>

<div class="txt_area"></div>

</div>

然后根据position:absolute定位跳转整个文字div的位置;

如果要添加有分页箭头 .swiper-pagination 和小圆点.swiper-button-prev和.swiper-button-next，这俩的div应该在swiper-container中和swipe-wrap并列，是swiper-container的子类。

如果想更改分页箭头的样式：则需要改.swiper-button-prev和.swiper-button-next的背景图片，以及位置（绝对定位的方式改）

如果想改小圆点的样式，可以通过.swiper-pagination.swiper-pagination-bullets确定他的方向（横着or竖着），

通过.swiper-pagination.swiper-pagination-bullets span改变每一个小圆点的大小、样式（背景图片，border颜色）等。