一 swiper使用

1 slide居中，第一个和最后一个slide贴边。

centeredSlides：true active slide会居中

centeredSlidesBounds：true 第一个和最后一个Slide 始终贴合边缘

 设置这两个属性即可得到上述效果。但是有时候第二个属性失效。第一个slide并没有贴合边缘。问题可能是swiper使用的是cdn版本，版本过低。改为npm 安装。不能引用src下面的swiper.js（dom7），需引用（swiper/js/swiper.js）

2 loop循环  初始化问题

开启loop模式时，swiper默认复制前后两张图片个一张。即 0,1,2==>2,0,1,2,0。

默认显示第一张图片（2）。如果要显示图片0，需设置initialSlide: 1，这时触发slideChange事件，realIndex为1（应该为0），为了初始化realIndex，需init: () => {this.bannerIndex =0;},

3 css制作圆点

设置：

width:5px;

height:5px;

border-radious:2.5px

有时候样式显示为带圆角的正方形。可能是长度过小，无法绘制。使用transform:scale(2),将其放大。即可解决