I am trying to apply different border-color for each slick item and then repeat itself the ( border-color ) but it's not working. The moment I put the slick on it, it only applies the first border-color which in this case is red.
<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;
}
$('.slider').slick({
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
speed: 300,
variableWidth: true
});
Slick is going to wrap those <div> elements in its own structure. So, what was:
<div class="slider">
<div> 1 </div>
<div> 2 </div>
…
</div>
… will end up looking more like:
<div class="slider slick-initialized slick-slider">
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track" role="listbox">
<div class="slick-slide">
<div> 1 </div>
</div>
<div class="slick-slide">
<div> 2 </div>
</div>
…
</div>
</div>
</div>
So, the direct-descendent selector .slider > div will end up applying to the .slick-list element, instead of your original slides.
To style your slides the way you want, you'll have to edit your selector(s) to accommodate Slick's rendered structure.
.slider > div { … }
.slider > div:nth-child(5n+1) { … }
… would have to be something like:
.slider .slick-slide > div { … }
.slider .slick-slide:nth-child(5n+1) > div { … }
Keep in mind that the .slick-slide elements are the ones that have the common parent — there is only ever one of your original <div> elements per .slick-slide, so .slider .slick-slide > div:nth-child(5n+1) { … } will not work.