Swiperの左右の矢印を変えるCSS

2020 4/15

前回に続いて、Swiperのちょっとしたカスタマイズの備忘録を載せておきます。

目次

Swiperの左右の矢印を変えるCSS

矢印の色を変える

swiperの矢印はsvgで書かれていて、例えばこちらのデモなら「fill%3D’%23007aff」の007aff部分がカラーコードにあたります。ここを他のカラーコードの#以下にすれば簡単に色を変えることができます。

.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%…2L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E);
    right: 10px;
    left: auto;
}

参考:swiperのデフォルトprevnextのSVGのfill色を変える。

矢印の形を変える

デフォルトでは矢印はsvgで書かれているので、background-imageをnoneにして三角形のCSSをつっこめばOKです。

.swiper-button-next{
    position: absolute;
    top: 50%;
    width: 0px;
    height: 0px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat;
    border-left: 25px solid #FFFFFF; /* 塗りつぶし矢印 */
    border-top: 25px solid transparent; /* 塗りつぶし矢印 */
    border-bottom: 25px solid transparent; /* 塗りつぶし矢印 */
    background-image: none; /* 背景画像なし */
}

参考:画像を使わずにCSSだけで三角・矢印を作る方法

あわせて読みたい
Swiper.jsのサムネイル画像とスライダーを連動させる
Swiper.jsのサムネイル画像とスライダーを連動させるスライダープラグインのSwiper.jsのカスタマイズでちょっと詰まったところがあったのでメモっておきます。【ページネーションにサムネイル画像を使う】スライドの下にサ...

Author

Akila@Freelance

Akila@Freelance

趣味でHTMLサイトを作ってWordPressをカスタマイズしていたら職業になった人。WebDesigner/フリーランス/講師

目次
閉じる