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

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

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

矢印の色を変える

swiperの矢印はsvgで書かれていて、例えばこちらのデモなら「fill%3D’%23007aff」の007aff部分がカラーコードにあたります。

ここを他のカラーコードの#以下にすれば簡単に色を変えることができます。

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

矢印の形を変える

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

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

 

Swiper.jsのサムネイル画像とスライダーを連動させる

2019年1月8日