swiper轮播图中自定义的箭头，分页器样式，以及带有蒙层的轮播图

自定义的分页器最好写在HTML页面,因为自带的属性会把你引入的css文件样式覆盖

分页器的CSS样式
<style>
/* 自定义分页器 */
.swiper-pagination {
   
    position: absolute;
    text-align: center;
    -webkit-transition: .3s opacity;
    -o-transition: .3s opacity;
    transition: .3s opacity;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 10;
    text-align: center;
    width: 50%;
    margin: 0 auto;
    margin: 0 4px;
}
/* 分页器的大小 */
.swiper-pagination-bullet {
   
  width: 10px;
  height: 10px;
  display: inline-block; 
  opacity: .2;
  border-radius: 50%;
  margin: 0 8px;
}
/* 颜色 */
.swiper-pagination-bullet-active {
   
  opacity: 1;
  background: #d71518;
  width: 40px;
  border-r