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

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

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

用法如下

  

    

      
  //图片
    
    

      

    
    

      

    
  
  
  


 
 
 
 

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;
}