rcbyr / keen-slider

The HTML touch slider carousel with the most native feeling you will get.
https://keen-slider.io/
MIT License
4.71k stars 215 forks source link

Carousel card effect #428

Open bigfanplanoly opened 5 months ago

bigfanplanoly commented 5 months ago

I want to create a carousel card effect using Keen slider and I spent some time trying everything on the docs page but I failed so I thought I would seek help from the awesome people who support this cool library.

The effect I want to achieve is growing middle item and shrinking others as I move the slider. the card in the middle appear above the others. As I move the slider to the left, the item on the right starts to grow. It becomes bigger than the current middle item until it reaches full size and becomes the new middle item.

I created an example where the middle item becomes bigger, but I am missing the effect of items growing and shrinking as the slider moves: https://codesandbox.io/p/sandbox/carousel-card-effect-lfxsss?file=%2Fsrc%2FApp.tsx

hope someone can help me and thank you.