vue中使用Swiper插件怎么修改他的分页器样式

Question

我已经初始化swiper了样式如下

目标是变成

是要for循环分页器编辑不同的样子的，
需求是修改下面的分页器样式请问怎么解决。
顺便问一个问题，swiper怎么控制他的滑动距离，求大神解答！