###### tags: `Swiper`
# 如何修改Swiper的pagnation
{%hackmd SybccZ6XD %}

pagnation的樣式透過兩個class樣式控制
1.swiper-pagination-bullet
2.swiper-pagination-bullet-active

原本預設的pagnation原本就是bullet
如下圖

## 首先改變顏色

:root{
  --primary-green:#62DB54;
}
.swiper-pagination-bullet{
  background: var(--primary-green) !important;
 }

如下圖

## 在來是active樣式
active樣式想做成pill的形狀，其餘的pagination維持原樣且不透明。

:root{
  --primary-green:#62DB54;
}
.swiper-pagination-bullet{
  background: var(--primary-green) !important;
  /* 沒有active的樣式是有透明度的這裡加上讓他不透明 */ 
  opacity: 1 !important;
  transition:0.5s ;  
 }
 /* 在active的樣式重寫border-radius與padding調整到pill形狀*/
 .swiper-pagination-bullet-active{
  padding:0 8px;
  border-radius: 6px;
  transition:0.5s ;
 }

修改後如下圖