どうしても、わからないことがあるため、質問させていただきます。
下の画像見ていただくとお分かりいただけると思いますが、左にある矢印の中身は透明で、右の中にある矢印の中身は白色です。
矢印の中身のデフォルトは、透明であり、私はこれを両方とも白色に統一したいと考えています。
しかし、slickのプラグインのどこをいじればいいのか、わからず困っています。
改善するために、試したこと
・CSSのcolorをすべて変更してみる事でどのコードが矢印の中身の色の変化に関わっているかの確認。
・slick.cssでも同様に確認。
・矢印 中身 色変更 slickなどググる。
この問題がお分かりになる方、大変恐縮ではございますが、ご教授頂けないでしょうか?
よろしくお願いします。
念のため、私のwebsiteのURLを掲載させていただきます。
HTML
<div align="center" class="boxslideshow2"> <ul class="thumb-item"> <li><a href="#"><img src="box img/box mainpic/main-pic.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-1.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-2.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-3.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-4.gif" alt=""></a></li> </ul> <!-- ↓サムネイル --> <ul class="thumb-item-nav"> <li><a href="#"><img src="box img/box mainpic/main-pic.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-1.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-2.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-3.gif" alt=""></a></li> <li><a href="#"><img src="box img/box slide/slide-4.gif" alt=""></a></li> </ul> </div> コード
CSS
/*スライドショーに関して*/ .boxslidebar{ width:100%; display: block; margin:0 auto; text-align:center; } .boxslide{ margin:0 auto; } .boxslide ul{ list-style: none; padding: 0; } .thumb-item li img{ width:100%; height:auto; } .thumb-item-nav li img{ width:100%; height:auto; } .boxslideshow2 ul{ padding-left:0px; } button.slick-prev, button.slick-next { z-index:2; } /*左右の矢印の色を変える*/ .slick-prev:before, .slick-next:before { color:#f3b995; } /*左右の矢印の位置を変える*/ .slick-next { right: 20px; } .slick-prev { left: 20px; } /*スライド数のドットの色を変える*/ .slick-dots li.slick-active button:before, .slick-dots li button:before { } /*スライド画像の横幅可変*/ /*スライドショー終わり*/ コード
slick.css
/* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } コード
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/10 09:57