Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Catalin R.

Slider GSAP

Recommended Posts

Hi DevSaver,


We will always try to help a fellow. :)


1 hour ago, DevSaver said:

I have a problem with this slider.


There's quite a bit of code to go over here, can you be a bit more specific than that? What exactly are you after here and what is the problem you are facing?

  • Like 2
Link to comment
Share on other sites


I have a problem with this code:

for (let i = 0; i < slides.length; i++) {
          TweenMax.set(slides[i], { backgroundColor: colorArray[i] });

          var newDot = document.createElement("div");
          newDot.className = "dot";
          newDot.index = i;

          jQuery(newDot).on("click", function() {


The dots of slider are not appearing.

I've commented this: //dots.appendChild(newDot); Because I have an error. I need to use jQuery to create new dot here.


When I drag the slide I have also an error: Cannot read property "x"


Link to comment
Share on other sites

Ok... Let's try and work this out together.


Do you know whey they are not appearing? It's because of the commented out line bellow.




But even if you do uncomment that line, it does not work. Why? Because 'dots' itself do not exist. Why?


Because in the variables definition at the top of you code you have


dots = hideMe.find(".dots")


But the .find() method from jQuery does not give you a single array of results, it gives you an Object with a property named '0' so, really you want to do either of the following:


dots = hideMe.find(".dots")[0];
// Or
dots = hideMe.find(".dots")['0'];

// However, note that you cannot use the bellow as the key name is a number and will not work
dots = hideMe.find(".dots").0;
// This will also not work
dots = hideMe.find(".dots").'0';


As for the second error, is a bit similar, you are trying to get the ._gsTransoform of an element when one does not exists. You first need to define a GSAP tween on such element before you can access its ._gsTransforms.

  • Like 5
Link to comment
Share on other sites


See the Pen aXXrQW by catalin_rusu (@catalin_rusu) on CodePen

I've made the change you suggested me. Doesn't work.

I've found this slider here: 

See the Pen YRzRyM by PointC (@PointC) on CodePen

and my problem is that I do not know how to create dots with jQuery.

Can you help me with this, please?



Link to comment
Share on other sites

Line 40 of your example pen.




It is still commented out. Do you understand what this line and the surrounding for loop is doing?


The dots are already created. They are just not being placed in the DOM. That's what that commented out line is doing.


So, you have a perfectly working example of what you trying to achieve. Do you understand all the lines on that demo? I know you might not, I have been in situations where I had to replicate someone else's code and did not understand all that was written. Would you like to go over it?

  • Like 4
Link to comment
Share on other sites

What is wrong there is that the original demo does not use jQuery and you are introducing it withoug making the alterations to the code that are required.


Before we go any further, why are you introducing jQuery in a demo that does not use it, does not require it? Why not use the code as it is?

  • Like 4
Link to comment
Share on other sites

3 minutes ago, DevSaver said:

I need jQuery into my project.


That might be the case but your project using jQuery does not mean you HAVE to introduce jQuery into a section of code that is already working without it, does it? It would save you a good deal of time if you don't try to convert the demo to use jQuery, just use as is.


What do you think?

  • Like 5
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.