Jump to content

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

Infinite Carousel with Draggable

Recommended Posts

Hi everyone, 


I'm trying to create an infinite carousel following this

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

by @OSUblake.

You can see in the codepen that it does work but I have this weird bug that the item that needs to go in the beginning of the list gets updated too late(?)

I've been banging my head to understand what's going wrong, I feel I'm missing something simple so I thought maybe someone has a suggestion.



See the Pen aQYMNj by tsimenis (@tsimenis) on CodePen

Link to comment
Share on other sites

Hi @tsimenis,


Since the cracks still dream of Thanksgiving ...


Here, my suggestion


// alternative list, if you want the "1" on the first left position

list: ["10", "1", "2", "3", "4", "5", "6", "7", "8", "9"]

// left: -itemWidth 

TweenLite.set(this.$refs.list, {
  left: -itemWidth 


See the Pen VVxwQo by mikeK (@mikeK) on CodePen

Best regards

  • Like 5
Link to comment
Share on other sites

Hi @mikel,


I feel so silly, it makes sense to offset the list. 


So in my case that I want to have half list items visible I would do this: 

TweenLite.set(this.$refs.list, {
  left: -(itemWidth + itemWidth / 2)


Thanks a lot for your suggestion :)


  • Like 1
Link to comment
Share on other sites



Besides @mikel's great solution for this you can see this sample I made of an endless marquee in React using the modifiers plugin. It shouldn't be too complicated to port this to Vue though and using Draggable to control the position of the elements:


See the Pen RVLBGJ?editors=0010 by rhernando (@rhernando) on CodePen


  • Like 5
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.