slickでスライダーを同一ページに２つ設置し、そのうちの１つだけを装飾したい。

Question

slickを使ってスライダーを同じページに２つ設置したのですが、そのうちの１つだけ、
スライダーの矢印の色や位置を変えたいのです。
ですがHTMLでは同じ「slick.css」と「slick-theme.css」をhead内で読み込んでいるため、
「slick-theme.css」をいじると２つとも変わってしまいます。

どのファイルでどのように記述したら連動せず、個別に装飾できるようになるでしょうか。
どなたか分かる方がいらっしゃいましたら教えていただけると幸いです。

Answer 1

ソースもなにもないので完全にイメージで書きます。

矢印はHTMLでスライドさせる要素を囲った要素の子要素として追加されるようです。
なのでCSSの子孫セレクタで修正できるのではないでしょうか。（ソースは完璧に表現しているわけではないです。）

<div class="slider1">
  <div><img src="..." /></div>
  <div><img src="..." /></div>
  <div><img src="..." /></div>
</div>

// こちらを変更加えたいスライダーだとします
<div class="slider2">
  // おそらくここに矢印が追加されている
  <button class="slick-prev slick-arrow"...>Previous</button>

  <div><img src="..." /></div>
  <div><img src="..." /></div>
  <div><img src="..." /></div>

  // おそらくここに矢印が追加されている
  <button class="slick-next slick-arrow"...>Next</button>
</div>

.slider2 .slick-prev {
  left: -50px;
  background-color: red;
}

.slider2 .slick-next {
  right: -50px;
  background-color: blue;
}

※slickライブラリは使ったことがありません。
オプションなどでいけるかもしれませんが詳しくは調べてください。

Comments

[退会済みユーザー]

ご回答くださりありがとうございました！

教えて頂いた通り、「slider2」にあたるクラス名を使用して、
.slider2 .slick-prev {
（任意のプロパティ：値）
}
で個別に変更することができました！
おかげさまで余白などの他の部分も変更することができました。
ありがとうございました！

Answer 2

装飾したい方のスライダーにclassを追加し、普段そのクラスにcssで装飾したら良いと思います。
例としては

<div class="hogehoge1 hogehoge2">
 スライダーの処理
</div>

hogehoge1が元々ついているclass、hogehoge2が今回装飾したいclass
cssのファイルはhogehoge2を指定できるものであればなんでも大丈夫だと思います。

Comments

[退会済みユーザー]

ご回答下さりありがとうございました！

クラスを追加せず「hogehoge1」にあたるクラス名だけで個別に変更できました！
ありがとうございました！