How to create a Zara website style carousel?

[xnslx]

Hello community,

 

I am hoping to do some Zara-style website(https://www.zara.com/us/), as you can see, it is a parent horizontal carousel that each of the containers can also be swiped vertically.  Here is my codepen, right now it is a little bit problematic. I hope to do exactly the same thing, when you vertically swipe the carousel, each of the following slides can be stacked on top of the previous one. Thank you in advance!

See the Pen OJYQKbE by xnslx (@xnslx) on CodePen

[Hideakimaru]

Hi @xnslx,

So actually idk which real implementation they have...
I think this should be something with this approach:

See the Pen VwOdXJZ by xhideakix (@xhideakix) on CodePen

If you scroll a long time to their footer you will see that they have different footers with the same information I guess.
And maybe should be something like that:

See the Pen MWdXGLR by xhideakix (@xhideakix) on CodePen

Also, this is so close to the approach with Observer which looks more like what you want.

Hope this will help you to find the best solution.💚

Thanks!
Hideakimaru

[Cassie]

Yep! That looks like Observer is the right tool,

 

This demo may be helpful for you

 

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

[xnslx]

@Cassie Hello there, actually I am using this

See the Pen JjqLjvP?editors=1010 by SahilAFX (@SahilAFX) on CodePen

, as a reference. Not sure if it is doable or not.

 

 

 

[Cassie]

Hey,

 

Ah ok I missed the horizontal/dragging part. That will definitely make it a little trickier, but the codepen you referenced won't be the way to get there.

 

The Zara site you linked to is using events rather than scroll (which is a good use case for Observer)

 

Why don't you start by getting to grips with Observer using the demo above and taking a look at the docs. You'll need to start again though I'm afraid, your original demo isn't the right approach. This isn't the right fit for a Scrolling/ScrollTrigger solution.

 

https://gsap.com/docs/v3/Plugins/Observer/