Need help on horizontal circular slider

[Difa Ananda]

First of all, im a newcomer to this platform,

I want to make a slider like this one, but I didn't know where to start.

The slider is only contains 3 on the screen, and when we click left/right item, it'll slide to these item.

Maybe anyone has some advise for me?

Thanks..

 

[mvaneijgen]

I would advice starting somewhere and sharing your findings. If you just make something and put it on codepen.io/pen it makes it so much easier to help you. 

 

 

[ZachSaucier]

There are also a lot of sliders/carousels in these forums or on CodePen that use GSAP that you could start from.

[Shrug ¯\_(ツ)_/¯]

This example in a previous thread seems applicable to your requirements based upon your image. You would need to add/change any additional logic you want for the features you need. It currently uses Draggable but you could make it work with ScrollTrigger or just simple prev/next buttons or all three approaches . The general concept should get you going in the right direction towards your goals. It too was sorted out by @PointC similar to the other example from the thread you first inquired in earlier. 😉

 

See the Pen eYBYMyw by GreenSock (@GreenSock) on CodePen

[Difa Ananda]

15 hours ago, Shrug ¯\_(ツ)_/¯ said:

This example in a previous thread seems applicable to your requirements based upon your image. You would need to add/change any additional logic you want for the features you need. It currently uses Draggable but you could make it work with ScrollTrigger or just simple prev/next buttons or all three approaches . The general concept should get you going in the right direction towards your goals. It too was sorted out by @PointC similar to the other example from the thread you first inquired in earlier. 😉

 

 

 

Ahh, I didn't see that before, thanks very much

[Difa Ananda]

On 3/3/2021 at 4:04 AM, Shrug ¯\_(ツ)_/¯ said:

This example in a previous thread seems applicable to your requirements based upon your image. You would need to add/change any additional logic you want for the features you need. It currently uses Draggable but you could make it work with ScrollTrigger or just simple prev/next buttons or all three approaches . The general concept should get you going in the right direction towards your goals. It too was sorted out by @PointC similar to the other example from the thread you first inquired in earlier. 😉

 

 

 

Hi Shrug, do you have any idea to make it scroll when it click left/right element?

I saw that code change timeline progress on drag, but how to get the left/right element position?

[ZachSaucier]

28 minutes ago, Difa Ananda said:

do you have any idea to make it scroll when it click left/right element?

I would probably create a transparent overlay of the left and right portions of the screen. When one of those elements is clicked, you animate the progress of the timeline that you have.

 

To do that properly you'll need to keep track of which index is currently in the center. That way you can increment or decrement. Then animate the progress by the distance ratio of one (1/numCells) in the direction it needs to go, making sure to keep the value between 0 and 1.

[Difa Ananda]

On 3/6/2021 at 12:50 AM, ZachSaucier said:

I would probably create a transparent overlay of the left and right portions of the screen. When one of those elements is clicked, you animate the progress of the timeline that you have.

 

To do that properly you'll need to keep track of which index is currently in the center. That way you can increment or decrement. Then animate the progress by the distance ratio of one (1/numCells) in the direction it needs to go, making sure to keep the value between 0 and 1.

I've realize about the next/prev, then i tried to edit the code to make the spacing between items tighter, but it seems didn't work