在之前發布過關于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，加上背景色，即可完成樣式改變！