search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.52k stars 605 forks source link

Real-time width adjust (custom) #1218

Closed elliottmangham closed 1 year ago

elliottmangham commented 2 years ago

Hey,

Has anyone been able to achieve, or at least know the way to reproduce something as close to this as possible?

Link to video: https://cln.sh/t1IrOA Source: https://p9.moscow/en/

I've been so far using reposition, which kind of works, but only after settling. As you can see in the video, it needs to adjust in real-time. In my case, I need all slides to be 380px by default and the selected one to be 720px.

$oCarousel.on( 'settle.flickity', function( event, index ) {
    $oCarousel.flickity( 'reposition' );
} );

Thank you for your help!

desandro commented 1 year ago

Flickity is likely not the right solution here. This animation requires re-positioning every cell as they move. Flickity is not designed for that. A custom solution may be the best approach.