Jump to content
Search Community

Slider to work with tweenMax for better slides animation

creative_routine test
Moderator Tag

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

Hello and welcome to the forums!

 

Please check out this thread for a very useful slider implementation by our very own Craig (PointC):

 

 

If you have a particular error that you'd like us to help you solve, please make a minimal demo using something like CodePen so that we can see your code and be able to help you more easily. For more information about that, check out this thread:

 

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Hey @hybreeder,

 

For my neighbor, the cobbler, I created this web a long time ago - and it also runs on the iPhone.

 

http://www.schustermasmann.imgrindelhof.de/

 

The swipe solution:

 


	$('.slides-container').swipe({
	swipe: function(event, direction) {
	  if (direction === 'up') {
		goToPrevSlide();
	  } else {
		goToNextSlide();
	  }
	}
	});

 

Try it ...

Mikel

 

  • Like 1
Link to comment
Share on other sites

@mikel, Thanks for the reply and swipe solution. I tried but I don't know what i doing wrong. I created code pen Please check this.

 

I have two issues

1) Swipe not working on mobile

2) In desktop: If I reach last slider which is "contact us" and swipe down 2-3 times more then swipe up is not working. I mean If swipe down 2-3 times then swipe up also I have to do 2-3 times then "contact us" selecting.  I think at the last slider swipe is still running. I have to stop swipe once reach last slider.

 

Please help me out with issue.

 

 

See the Pen ExYdqdQ by Narendra_verma (@Narendra_verma) on CodePen

Link to comment
Share on other sites

  • 3 months later...

@mikel Not sure if I was clear. I need to get wich li Element is going to be visible. I understand to load and make the array. I also understand your code to make something if the animation starts. But I must know which number in the array is visible. To understand: let’s say red green blue = li 1 2 3. and I want to change some class from icon outside the whole list. If red I show red icon and on. But for this I must know wich list element is going visible.

 

 

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