Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Novice

Slider navigation

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

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

Link to post
Share on other sites

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.

  • Like 3
Link to post
Share on other sites

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

 

  • Like 4
  • Thanks 1
Link to post
Share on other sites
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?

Link to post
Share on other sites

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');

 

  • Like 2
Link to post
Share on other sites
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.

  • Like 3
Link to post
Share on other sites
Quote

Constructive criticism.

:D 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. :D Thanks.

  • Like 1
Link to post
Share on other sites
15 minutes ago, Sahil said:

:D 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.

  • Like 2
  • Thanks 1
Link to post
Share on other sites

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());
});

 

Link to post
Share on other sites
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

 

 

  • Like 3
  • Thanks 1
Link to post
Share on other sites

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

  • Like 4
Link to post
Share on other sites

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.

 

  • Like 2
  • Thanks 1
Link to post
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.

×