矢印の変更
HTMLというかphp
|
1 2 3 4 5 6 7 8 |
<div class="slick-container"> <ul class="slider"> <li class="pc"><img data-lazy="<?php echo get_template_directory_uri(); ?>/mv-img01.jpg" alt=""></li> <li class="pc"><img data-lazy="<?php echo get_template_directory_uri(); ?>/mv-img02.jpg" alt=""></li> <li class="pc"><img data-lazy="<?php echo get_template_directory_uri(); ?>/mv-img03.jpg" alt=""></li> <li class="pc"><img data-lazy="<?php echo get_template_directory_uri(); ?>/mv-img04.jpg" alt=""></li> </ul> </div> |
というのがあった場合
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.slider { .slick-prev{ left: 90px; } .slick-next { right: 90px; } } .slick-container{ .slick-prev:before,.slick-next:before{ margin: 0 10px 0 0; content: " "; display: inline-block; width: 10px; height: 10px; background-image: url(arrow.svg) !important; background-size: contain; vertical-align: middle; background-repeat: no-repeat; color: inherit; } .slick-prev:before{ transform: scale(-1, 1); } } |
こんな感じで入れ込みます。
scale(-1,1)で反転させるのがポイント。
最初からslickのオプションに矢印交換はあるのだけれど、自分でやっちゃいたかった。
.slick-prevはお好きなように。センターモードで画像の上に置く事を想定しています。
ドットの変更
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
//ドット ul.slick-dots{ bottom: 5px; li button:before{ background-image: url(circle_deactive.svg) !important; opacity: 0.5; content: ''; background-size: cover; } li.slick-active button:before{ background-image: url(circle.svg) !important; opacity: 1; content: ''; background-size: cover; } } |
こんな感じですね。background-size: cover;にして、サイズを変えたいときは先程矢印を変更した時に追記した.slick-prev:before,.slick-next:beforeの幅と高さを変えてあげましょう。