Hello everyone -
I am wondering if anyone has been able to accomplish a carousel that looks like this with the center image larger and overlapping the smaller ones on the sides, and if yes, would you be so kind as to provide a share link?
I found this discussion: Unique Slider Layout – it’s close but not quite what I’m trying to accomplish (at least I don’t think it is).
I’m hoping someone knows of an example out there that I missed.
Thanks everyone!
Hi,
It’s kind-of possible…I’ve created a custom carousel that has 3 items per page…but it scrolls all 3 at a time. You could certainly have the middle one larger but the effect might not be exactly what you want.
When I learnt the Sencha Touch framework a few years back I remember a trick that was used on the regular carousel to achieve the effect that you want. The contents of the carousel (the div containing all slides) had the browserWidth of that DIV set to 80% using this Sencha Touch code:
browserWidth * 0.8.
This meant that it achieved the affect that you want…I would have to look as the proper CSS generated code in my archives to see what the exact CSS was for it to of be any use for you though.
Here is the article that I am referring to (please note: might be a confusing article unless you know Sencha Touch, but it demonstrates the effect we are talking about - I have the CSS code that I can inspect somewhere):
Cheers,
Simon
This is what you’re looking for I think:
You can see how it’s built here:
https://preview.webflow.com/preview/sab?preview=42fe664f1df0d6001bb84af6ed30f69f
Just go to the page “interactive elements”
As the second video I made was inspired by this question, I invite you to have a look at it.
I hope that would help you 
Cheers
Max
