Jump to content
GreenSock

Andy777

Add items to slider issue

Go to solution Solved by Cassie,

Recommended Posts

Hello, if i add another div to the slider the same doesn't work, so how can i add more divs and make the slider work properly? 

See the Pen gOvvJee by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hi @Cassie ,

 

sorry i was not specific, the divs that you added must be added once a user click on button "Add div to wrapper", once you add the new div you will see what the problem is.

 

Link to comment
Share on other sites

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

Link to comment
Share on other sites

 

 

It add the div but is not visible because miss the proprieties css. So how i add them and make the slider work even with the new div?

 

Here is the minimal demo

See the Pen WNyGqZo by Andy199807 (@Andy199807) on CodePen

Link to comment
Share on other sites

  • Solution

Heya Andy,

At the moment you're just adding a DIV into the DOM - but the function that created the 'loop' and the array of boxes aren't aware of that.

 

You'll need to update the array to include the new element, kill the old loop timeline and create a new one that includes the new element.

Something like this...

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



Hope this helps!

  • 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.
×