Slider GSAP

[Catalin R.]

Hi,

I have a problem with this slider.

Can anybody help me?

Thanks a lot!

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

[Dipscom]

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?

[Catalin R.]

Hi,

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;
          navDots.push(newDot);

          jQuery(newDot).on("click", function() {
              slideAnim();
          });

          //dots.appendChild(newDot);
      }

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"

Thanks!

[Dipscom]

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.

 

//dots.appendChild(newDot);

 

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.

[Catalin R.]

Hi,

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?

Thanks!

 

[Dipscom]

Line 40 of your example pen.

 

//dots.appendChild(newDot);

 

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?

[Catalin R.]

Sorry!

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

Something's wrong between 30 and 40 line in js file.

[Dipscom]

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?

[Catalin R.]

I need jQuery into my project.

[Dipscom]

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?

[Catalin R.]

It works!

Thanks a lot!