Estoy tratando de aplicar un color de borde diferente para cada elemento pulido y luego repetir el (color de borde) pero no funciona. En el momento en que le pongo la mancha, solo aplica el primer borde de color que en este caso es rojo.
<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 envolverá esos elementos <div> en su propia estructura. Entonces, ¿cuál fue :
<div class="slider"> <div> 1 </div> <div> 2 </div> … </div>… terminará pareciéndose más a:
<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> Por lo tanto, el selector de descendencia directa .slider > div terminará aplicándose al elemento .slick-list , en lugar de a las diapositivas originales.
Para diseñar sus diapositivas de la manera que desee, tendrá que editar su(s) selector(es) para adaptarse a la estructura renderizada de Slick.
.slider > div { … } .slider > div:nth-child(5n+1) { … }… tendría que ser algo como:
.slider .slick-slide > div { … } .slider .slick-slide:nth-child(5n+1) > div { … } Tenga en cuenta que los elementos .slick-slide son los que tienen el padre común: solo hay uno de sus elementos <div> originales por .slick-slide , por lo que .slider .slick-slide > div:nth-child(5n+1) { … } no funcionará.