Only show animation on respective slider

[Gubbels]

Hi y'all. I need some help here with my current project for university.

 

Here's what I want to do:

I created a slideshow for which I want to display animations (for example: scale on mouseover), however I want to show different types of animation based off on what slideshow page I am.

 

Let's say

      I'm on slider 1 / 3 . Here I want the div box to scale:2
      I'm on slider 2 / 3 . Here I want the div box to move x:200
      I'm on slider 3 / 3 . Here I want the div box to opacity:0.2

 

The thing is I kind of know how to do it, using an if statement, but I'm not entirely sure what I have to put in between the brackets [if (HERE)] to target each slider.

Thank you in advance for all the advice and help : )

 

See the Pen Zmxpvz?editors=0110 by gabs97 (@gabs97) on CodePen

[GreenSock]

Do you mean something like this?:

See the Pen ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Notice that your original was using querySelector() which will only get the FIRST match, whereas querySelectorAll() will get all matches but of course you've gotta loop through them to attach listeners accordingly. There are actually a lot of ways you could structure this.