target visible content based on nth-child, nth-of-type

[aryanrajseo]

hi, i am trying to add a css effect based on the is-visible slide. There is 4 slides visible, 1 slide move. When first slide is moved, the .is-visible is added to second slide but css don't know this dom change so the following change not work despite the odd, even slide changes. What i can do in this so it get updated with correct css that i can target?

`.splide__slide.is-visible:nth-child(2n+1) img {
transform: rotate(15deg);
transition: .5s ease-in-out;
}

.splide__slide.is-visible:nth-child(2n) img{
transform: rotate(-15deg);
transition: .5s ease-in-out;
}`

https://jsfiddle.net/pzou9kej/

[aryanrajseo]

Basically looking for slide rotation without cloning. Removing the first slide dom and adding it to the last. something like this.
https://codesandbox.io/p/sandbox/4whtvc