How to add active class to slider with custom JS?

Hello, I am looking for a solution to style the second, third and fourth slide of the standard Webflow-Slider after my currently active slide with css.

The class of all of my slides inside the slider is: .team-slider__slide and tried it with this CSS:

.team-slider__slide:not([aria-hidden="true"]) ~ .team-slider__slide:nth-of-type(3) {
	color: red;

The problem is, that the “nth-of-type” does not change when I click on the next slide. It remains the same Element, so it’s useless. Does anybody know a selector that might fit here? It seems so close to the solution but I think it is not possible with pure CSS (But who knows, maybe one of you CSS gods has an idea).

So my second idea is to add a class with JavaScript to the currently active slide and the next 3 siblings. But I don’t have a clue how to achieve this. Does anybody have an idea?

Thanks so much!



Does really nobody know how to achieve this? :smiling_face_with_tear:

Hi Mirko, So Im finding it hard to understand what you mean by “trigger the second, third and fourth slide” If you can elaborate a bit more on what you’re trying to achieve with the slider as a whole it’ll help me understand your issue a bit more


Hi Mirko, I am not sure if I understood what you`re asking…

But if you are trying to add a custom css to the 3 elements after the current active slide, you may try using CSS adjacent sibling selector “+”.
Your css code should look like this:

.team-slider__slide:not([aria-hidden="true"]) /*CURRENT ACTIVE SLIDE*/
	color: green;
.team-slider__slide:not([aria-hidden="true"]) + *, /* 1st sibling */
.team-slider__slide:not([aria-hidden="true"]) + * + *, /* 2nd sibling */
.team-slider__slide:not([aria-hidden="true"]) + * + * + * /* 3rd sibling */
	color: red!important;


That’s exactly what I needed. Thanks so much!!! Awesome!! :slight_smile: