How to apply different border-color for each slick slider item-CodePudding

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 >
  <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;
}

CodePudding user response：

Use css variables

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

.slick-item{

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

CodePudding user response：

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 >
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>