slickスライドショーのボタンについて

slickというjQueryプラグインを使って、レスポンシブデザインでスマホ対応のスライダーをwebsiteに実装したいのですが、矢印の色が白いままで、変更することができません。

「slick 矢印出ない」、「slick 矢印色」とchromeで検索することで、たくさんの関連記事が出てきたのですが、ほとんどの記事では、
.slick-prev:before,
.slick-next:before {
color: black;
}

のコードで、defaultが白になっているから、他の色に変えるようにありました。
今回、私はwhiteを黒に変えるため、上記のコードを作成しました。
しかし、変化はありませんでした。
しかし、background-color:blackを打つと、ボタンの周りが見え、ボタンの存在を確認することはできました。

下記の画像を見てもらうとわかると思いますが、擬似要素を利用したブロック要素がボタンの位置があることがわかると思います。次に、私はbutton.slick-prev.slick-arrow::beforeをcssに書き、color:black;を指定しました。しかし、その場所に何の色も現れることもなく、何の変化もありませんでした。

どこに、色を指定すれば、ボタンが表示されるのでしょうか？

念のため、私のURLをここに記載させていただきます。URL

この問題がお分かりになる方大変恐縮ではございますが、ご教授頂けると幸いです。

よろしくお願いします。

HTML

    <ul class="thumb-item">
      <li><a href="#"><img src="box img/box mainpic/main-pic.gif" width="100%" alt=""></a></li>
      <li><a href="#"><img src="box img/box slide/slide-1.gif" width="100%" 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" width="100%" 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>
コード

CSS

 /*左右の矢印の色を変える*/
 .slick-prev:before,
 .slick-next:before {
   color: black;
 }

 /*左右の矢印の位置を変える*/
 .slick-next {
     right: 20px;
     color: #51aa37;
 }
 .slick-prev {
      left: 25px;
      color: #51aa37;
 }
 /*スライド数のドットの色を変える*/
 .slick-dots li.slick-active button:before,
 .slick-dots li button:before {
     color: #51aa37;
 }
 /*スライド画像の横幅可変*/
 img {
     max-width: 100%;
      height: auto;
 }
コード

行動規範の内容に同意します

回答2件

ベストアンサー

HTML
1<link rel="stylesheet" type="text/css" media="screen and (max-width: 767px)" href="box-sp.css" />
2
3<link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" />
4<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" />

とあり、詳細度が同じなので後から書かれた方が優先されているのでは。

投稿2017/04/01 04:55