LoginSignup
0
0

Swiper.jsのナビゲーションの色を変える

Posted at

検索しても解決方法が見つからなかったので、メモ

ナビゲーションの色とナビゲーションボタンのサイズを変更しています。

.swiper-button-prev {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 27 44'%3E%3Cpath d='M0,22L22,0l2.1,2.1L4.2,22l19.9,19.9L22,44L0,22L0,22L0,22z' fill='%233f3f3f'%2F%3E%3C%2Fsvg%3E");
    background-size: 13.5px 22px;
}

@media (max-width: 600px) {
    .swiper-button-prev {
        background-size: 22px 44px;
    }
}

.swiper-button-next {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox='0 0 27 44'%3E%3Cpath d='M27,22L27,22L5,44l-2.1-2.1L22.8,22L2.9,2.1L5,0L27,22L27,22z' fill='%233f3f3f'%2F%3E%3C%2Fsvg%3E");
    background-size: 13.5px 22px;
}

@media (max-width: 600px) {
    .swiper-button-next {
        background-size: 22px 44px;
    }
}
fill='%233f3f3f'

3f3f3fは16進数カラーコードです。これをデコードすると、#3f3f3fとなります。このカラーコードは暗い灰色(ダークグレー)となります。
とりあえず、ここでカラー指定すれば変更できました。

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0