Slick: Change arrow colors?

[benjino]

How do you change the colors of the prev/next arrows?

[simeydotme]

css.

[benjino]

Yah, I tried that with .slick-prev and .slick-next and even added !important and it didn't work.

[simeydotme]

if you inspect the code, I believe the color needs to be added for .slick-prev:before :) - the icon is added via psuedo-element. :bow:

[benjino]

Thanks, got it to work. When I inspected it, it wasn't indicating ":before" and I had to add !important as well. Thanks again!

[buck3000]

.slick-prev:before {
  color: some-color;
}
.slick-next:before {
  color: some-color;
}

[hari03]

Wonder why this isn't mentioned in the documentation!

[ismhamza]

.slick-prev:before {
  color: some-color;
}
.slick-next:before {
  color: some-color;
}

color isn't applying. background-color applying though

[robwent]

I think the icon/arrow is actually the circle with a transparent part cut out of the center. So the only way to change it would be to change the background which would then show as a square behind the circle.

I think it's easiest to add your own arrow html and then use the prevArrow and nextArrow options to use the custom ones.

[vihar]

This one will work :)

.slick-prev:before {
  color: red !important;
  background-color: #eee;
}
.slick-next:before {
  color: red !important;
  background-color: #eee;
}

[carloslederman]

I have included these lines into my style.css file, and have not worked. My inclusion was

/*.slick-prev:before {color: red !important;background-color: #eee;} /*.slick-next:before {color: red !important;background-color: #eee;}

Have I made any mistake?

Thank you!