Draggable infinite carousel

[ektorp]

With the help of Draggable, I've put together a swipe carousel gallery using test place holder assets. It's pretty straight forward and works the way a standard touch based carousel would work. Performance on mobile and tablets is great. I am now looking to implement an infinite or looping carousel that continuously rotates through the slide items as you swipe through. I know there are various jQuery plugins that do this but I am looking to do my own custom solution using GSAP. I've seen some examples doing this using div or slide "clones" but haven't really figured out how this is implemented. Based on the Draggable carousel I currently have in place, is there a straight forward way to let it run infinitely? It would basically continuously loop through if you swipe through or use the navigation arrows. Any help would be greatly appreciated.

See the Pen db82c6c86dfef17951df744ed8e3a42a by bdang (@bdang) on CodePen

[Carl]

Sorry for the delay.

That's a great gallery you put together.

 

There really isn't an easy GSAP answer. 

The tricky part is that you will need a way to display the last slide moving away while the first slide moves in, and one way to do that is to manipulate the DOM so that once a slide moves offscreen to the left it gets picked up and moved to the right (and vice versa)

 

Take a look at the first Flash demo on this page: http://www.snorkl.tv/2011/02/easy-infinite-scroll-part-1/ (toggle the mask)

 

That is simply to illustrate the concept. To do that in JavaScript is going to take a little work and then you also have to figure out how your circle navigation on the bottom is going to update. 

 

Unfortunately I just don't have the time to work that all out.

 

I think the best advice I can give you is to study this tutorial: http://greensock.com/cube-dial-tutorial

The concept of using an invisible Draggable as a proxy to tween a "null object" is very powerful.

Also note in the first demo that if you slide the "perspective" slider to the right, it flattens the cube into an infinite 2D slider. Very cool