HTML轮播图修改圆点为长方形,CSS修改swiper幻灯片 - 状态圆点变长条修改

在之前发布过关于swiper的文章《swiper幻灯片自定义切换三角特效》主要分享的是切换按钮的特效CSS，本文来介绍下swiper幻灯片插件的状态圆点样式改变！

因为swiper幻灯插件都有默认的CSS，所以要添加CSS的时候是覆盖添加，添加的一定要显示在swiper自带CSS的下方方可生效！

swiper默认的状态圆点状态图：

要最终实现的效果如下：

只需要改变和覆盖CSS样式即可：

使用google chrome右键检查，获知.swiper-pagination-bullet

修改CSS：.slider .swiper-pagination-bullet{background-color: #64cdbe;width: 45px;height: 5px;border-radius: 0;opacity: 1;}

.slider .swiper-pagination-bullet-active{background: #fff;}

对宽和高进行命名，恢复圆角为0，透明度也改回1，加上背景色，即可完成样式改变！