前回に続いて、Swiperのちょっとしたカスタマイズの備忘録を載せておきます。
Contents
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; /* 背景画像なし */
}
あわせて読みたい
Swiper.jsのサムネイル画像とスライダーを連動させる
スライダープラグインのSwiper.jsのカスタマイズでちょっと詰まったところがあったのでメモっておきます。 【ページネーションにサムネイル画像を使う】 スライドの下に...