How to add active class to slider with custom JS?

Design help Custom code
1

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!

Read-Only: https://preview.webflow.com/preview/slider-read-only?utm_medium=preview_link&utm_source=dashboard&utm_content=slider-read-only&preview=dbed7f4fec1ef726228e66587df0246f&workflow=preview

Frontend: https://slider-read-only.webflow.io/

2

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

3

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

2 Likes
4

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:

<style>
.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;
}
</style>

imagem_2023-06-13_183000036
imagem_2023-06-13_1830000361311×652 12.3 KB

2 Likes
6

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