Jump to content
Search Community

forward and backward buttons

celli test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I have a codePen that shows colored boxes, that when clicked reveal the appropriate image based on the data-id. This part works perfectly to remove the current image and show the correct image. I also have a "forward" button which should reveal the next image, which I can't seem to get working properly.

 

I figured I would add a class to the current image, so that the forward button knows which item is 'current' and then use jQuery's 'next' selector, and then change the css to reveal the next image. It seems to work the first time I click the forward button, but think it is having trouble because it doesn't know to change the .currentLargeImg to the 'next' image, when the forward button is clicked the first time. So, I think it is removing the class, and then adding it right back to the same (old) current item.

 

I am also anticipating that I would need to loop the last image to the first image, so that when I am showing the last image--the 'next' one would actually then become the first image.

 

Maybe there is an easier way that adding and removing the class to know which is the current and next item, to be able to get it to function properly ? 

See the Pen OyGrEB by celli (@celli) on CodePen

Link to comment
Share on other sites

I got it to work--with this updated codePen pasted below if someone is looking for this simple interaction. I will convert my jQuery CSS to GSAP--I just put that in there for testing because some other parts of the actual page use autoAlpha and I wanted to mimic that behavior for this test.

 

See the Pen vLgpdB by celli (@celli) on CodePen

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...