如何为每个光滑的 slider 项目应用不同的边框颜色

Question

I need to apply different border-color for each slick slider item with 5 colors staring with red, i tried the code below it does not work, it applies only the first color to all items when I apply slick-slider to it.

<div class="slider">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div> 
  <div></div> 
  <div></div> 
</div>

.slider {
  display: flex;
  gap: 20px;
  flex-direction: row;
}

.slider > div {
    height: 50px;
    width: 50px;
    background-color: blue;
  }

.slider > div:nth-child(5n+1) {
  border: 5px solid red;
}
.slider > div:nth-child(5n+2) {
  border: 5px solid orange;
}
.slider > div:nth-child(5n+3) {
  border: 5px solid yellow;
}
.slider > div:nth-child(5n+4) {
  border: 5px solid pink;
}
.slider > div:nth-child(5n+5) {
  border: 5px solid green;
}

Answer 1

Use css variables

<div class="slider">
  <div style='--clr:#000'></div>
  <div style='--clr:#fff'></div> 
------
</div>

.slick-item{

border:5px solid var(--clr);
}

Answer 2

You just need to alter the nth-child settings:

 .slider { display: flex; gap: 20px; flex-direction: row; }.slider>div { height: 50px; width: 50px; background-color: blue; }.slider>div:nth-child(5n+1) { border: 5px solid red; }.slider>div:nth-child(5n+2) { border: 5px solid orange; }.slider>div:nth-child(5n+3) { border: 5px solid yellow; }.slider>div:nth-child(5n+4) { border: 5px solid pink; }.slider>div:nth-child(5n+5) { border: 5px solid green; }

 <div class="slider"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>