slickのカスタマイズ

写真:WordPress

前回の続き

矢印の変更

HTMLというかphp

 

というのがあった場合

 

CSS

こんな感じで入れ込みます。
scale(-1,1)で反転させるのがポイント。

最初からslickのオプションに矢印交換はあるのだけれど、自分でやっちゃいたかった。
.slick-prevはお好きなように。センターモードで画像の上に置く事を想定しています。

 

ドットの変更

こんな感じですね。background-size: cover;にして、サイズを変えたいときは先程矢印を変更した時に追記した.slick-prev:before,.slick-next:beforeの幅と高さを変えてあげましょう。