tags: Swiper

如何修改Swiper的Navigation button icon

Swiper的Navigation button是用偽元素的after呈現的，如果要修改就必須從這裡下手，這邊是用google material icons取代原本的icon

原本的navigation為下圖

載入cdn

在.html的head載入

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

找到想要的code point

如下圖，我想要使用的是Arrow Forward Code ponit是e5c8

在Navigation button的偽元素的after使用code point

範例如下

.swiper-button-prev::after{
    contetn:'\e5c4';
    font-family:'Material Icons';
}
.swiper-button-next::after{
    contetn:'\e5c8';
    font-family:'Material Icons';
}

如下圖這樣子就改成功了

如果是使用tailwind修改，原理是一樣的只不過變成用JIT與Tailwind.config寫
範例如下
tailwind.config設定字形為了是能在class使用font-family:'Material Icons';

    extend: {
        fontFamily: {
        'google-material': ['Material Icons'],
      }
    }

接下來是在class中使用範例如下

    <div class="swiper-button-prev after:content-['\e5c4'] after:font-google-material"></div>
    <div class="swiper-button-next after:content-['\e5c8'] after:font-google-material"></div>

修改navigation icon 大小

navigation icon的大小是由套件預設的變數提供，要修改只能從變數下手。
如下圖

所以要修改大小的話就用css變數直接蓋掉

:root{
  --swiper-navigation-size:20px;
}

可以看到改完之後就變小了