slider Slider navigation

[Novice]

I'd like to say hello to everyone at the beginning.

 

I'm a novice in JavaScript world and I have a question. I tried to create navigation for my first GSAP slider and I have no idea how to get started. I'd be grateful for all the tips.

 

Regards,

Novice

See the Pen LOBmNO by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo, looks like you have quite a bit working nicely already.

 

This isn't the type of thing I can dive in and write for you, but I would suggest you create function that can show any slide. Basically you would pass it a slide index and use that index to animate in the proper content sort of like:

function showSlide(index) {
  //code to hide current slide
 //code to reveal slide based on the value of index
}

//show the slide for index of 2
showSlide(2);

 

We have to keep our support closely tied to the GSAP API (animation), but there might be some folks who have some similar examples to share.

[Sahil]

Whoever wrote that original demo did great job of keeping things simple, I struggled a lot doing so. Following is the demo, you can add few more conditions so clicking on current slide won't animate it.

 

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

 

[Carl]

nice job, Sahil!

[Novice]

5 hours ago, Sahil said:

Whoever wrote that original demo did great job of keeping things simple, I struggled a lot doing so. Following is the demo, you can add few more conditions so clicking on current slide won't animate it.

 

Thanks for this. Sahil, do you know how I can add class "active" to slider-controls when changing the slider?

[Sahil]

Ya I have updated the demo with following code inside slideNext function.

 

  $('.slider-controls').find('div').removeClass('active');
  $('.slider-controls').find('div').eq(currentSlide).addClass('active');

 

[OSUblake]

6 hours ago, Sahil said:

Whoever wrote that original demo did great job of keeping things simple, I struggled a lot doing so. 

 

Constructive criticism. jQuery is a crutch, and might be holding you back. Try to do all your demos without it. You'll quickly notice that it's not needed in 99.9% of the stuff you do.

[Sahil]

Quote

Constructive criticism.

you don't have to be so formal, any suggestions from you and other forum members are welcome. I usually refer you as guy who is 100 times smarter than me, so you get the idea.

 

I was considering to slowly give up on jQuery, I was also hoping at some point you will suggest it to me, maybe I was just waiting for iy. Thanks.

[OSUblake]

15 minutes ago, Sahil said:

you don't have to be so formal

 

Hehe. Some people might take it the wrong way.

 

And it looks like you're a moderator now. Congrats!

 

There's nothing wrong with jQuery, but to truly understand how it works, you need to use regular JavaScript. A good place to get started is youmightnotneedjquery.com. It doesn't cover every edge case, but should be good enough if you're just experimenting or making demos.

[Novice]

I reworked the last Sahil's codes – it works in pure JavaScript. I have a problem with jQuery code currently:

 

$('.slider-controls div').click(function(){
	TweenMax.killDelayedCallsTo(nextSlide);
	TweenMax.killDelayedCallsTo(nextSlideDescription);
	nextSlide($(this).index());
	nextSlideDescription($(this).index());
});

 

[OSUblake]

21 hours ago, Novice said:

I reworked the last Sahil's codes – it works in pure JavaScript. I have a problem with jQuery code currently:

 

$('.slider-controls div').click(function(){
	TweenMax.killDelayedCallsTo(nextSlide);
	TweenMax.killDelayedCallsTo(nextSlideDescription);
	nextSlide($(this).index());
	nextSlideDescription($(this).index());
});

 

 

To do that without jQuery, you need to loop through all the elements and add a click event listener. So something like this...

 

var controlElements = document.querySelectorAll(".slider-controls div");

Array.prototype.forEach.call(controlElements, function(element, index) {  
  element.addEventListener("click", function(event) {
    TweenMax.killDelayedCallsTo(nextSlide);
    TweenMax.killDelayedCallsTo(nextSlideDescription);
    nextSlide(index);
    nextSlideDescription(index);
  });
});

 

 

If you're not going to use jQuery, I would take a more object-oriented approach. Here's one way you could do that.

 

See the Pen NwLQyV by osublake (@osublake) on CodePen

 

 

[Sahil]

@OSUblake Really amazing, thanks for showing what 'keeping it simple' really means.

[OSUblake]

Yeah, working with objects instead of directly with elements makes it much easier to simplify complicated behaviors like this navigation. Sometimes it requires a little more code, but the end result should be much easier to work with.