swiper轮播下边点点不显示以及自带样式修改产生显示异常问题

这几天用vue-awesome-swiper3.1.3实现了一个轮播效果，下边的点点就是不显示。。不管怎么修改在网上百度到要用不同的写法之类，都不好使。

改变思路，没用npm安装包，直接下载swiper.js(4.0版本)和swiper.css文件.

用法如下

<div class="swiper-container" @slideChangeTransitionEnd="getCurSlider">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="partners first"></div>  //图片
    </div>
    <div class="swiper-slide">
      <div class="partners second"></div>
    </div>
    <div class="swiper-slide">
      <div class="partners third"></div>
    </div>
  </div>
  <!-- 如果需要分页器 -->
  <div class="swiper-pagination"></div>

<!-- 如果需要导航按钮 --> 
<div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> 
<!-- 如果需要滚动条 --> 
<div class="swiper-scrollbar"></div>
</div>

data(){
    return{
      mySwiper:null,
    }

}

mounted(){
  this.mySwiper = new Swiper('.swiper-container', {
    notNextTick: true,
    //设定初始化时slide的索引
    initialSlide: 0,
    direction: 'horizontal', // 水平切换选项
    loop: true, // 循环模式选项
    autoplay: {
      disableOnInteraction: false,//手动滑动之后不打断播放
    },
    //滑动速度
    speed: 1000,
    // 如果需要分页器
    observer: true, //监听，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。
    pagination: {
      el: '.swiper-pagination',
    },
    observeParents:true//修改swiper的父元素时，自动初始化swiper  如果修改外层样式，这个一定要加！！
  })
  }
},

.swiper-container {
  padding: 0 0 20px 0;
}
.swiper-pagination {
  margin-left: -12px;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 0px;
}