How to identify active slide programatically

Community resources General
1

Hello team,

I am having slider with 3 slides, 1st one has video with white background and remaining are images, now I want to make navigation links to black for first slide only and for remaining slides it will be white. I am using scrollify so when I scroll up from 2nd section to 1st section where slider is displayed again as per active slide it should display navigation colour.
So to do that I need to identify active slide pragmatically. As I am using scrollify I can’t use ineractions even if I used it will not help me to change color for particular slide when I scroll.
Can you please share me the code so that I can identify which slide is active

thank you

2

As you don’t share public link it is hard imagine what you explain but first thing what I will use are browser DevTools to see what attributes and its values are added or changed when slide is active and if there will be not a way how to solve it with Webflow functionality I will write simple function(s).

1 Like
3

Hi @ketan_kulkarni, to get the active slide of a Webflow slider you could observe each of your slides and target the one that does not have the attribute aria-hidden. To do so you can use the crossbrowser MutationObserver method which will observe any attribute mutation of your slides and trigger any custom function you like with the active slide.

Hope that helps.

2 Likes
4

thanks for replying @Stan, I checked attributes and found arial-hidden property

2 Likes
5

thanks @anthonysalamin, your solution worked perfectly for me, MutationObserver was perfect fit

1 Like
6

Hey ketan_kulkarni,

I have a javascript which shall work only on specific slides. Could you tell me how I can implement the arial hidden state in a javascript?