flickity.resize only works on first slide

[elli-pirelli]

Hi,

I'm trying to do a slider with an animatioon where the clicked slide enlarges to the whole screen and I've used .flickity('resize') to achieve this. However it only ever works on the first image on the page ( cellAlign: 'left'). When I click on the second or third slide it still opens the first.

You can see it here.

https://codepen.io/elli-pirelli/pen/QYPMZO

I actually sort of noticed that the problem is that is is-expanded class is added to the carousel and not the ceel. What can I do? I have a different version where I used static click. There the problem is, that I cannot fit the slide to a 100% viewport once clicked.

https://codepen.io/elli-pirelli/pen/zeXPro

[desandro]

Hello! Thanks for reporting this issue.

1. Flickity does not support animating cell sizes. I do have an closed issue tracking this feature over at #245
2. resize is for resizing the carousel AND re-positioning cells after resize. In your demo, only the cells are being resized, so you should look at the reposition demo. I realize this is easy to mix up.

[elli-pirelli]

Hi,

thanks for the reply. I have tried reposition and ran into some issues. Maybe you can help me. Is there a way to to remove reposition once you either drag or click to go to the next slide or slideGroup? The class remains there and leads to gaps once you grag.

I have created a reduced version in codepen here: https://codepen.io/elli-pirelli/pen/zbGLZR

[desandro]

You can add another listener on change

// jQuery
$carousel.on( 'change.flickity', function( event, index ) {
  console.log( 'Slide changed to ' + index )
});

[elli-pirelli]

Thanks. I actually already tried that, but it doesn't quite work.

$carousel.on( 'change.flickity', function( event, index ) { if ( !cellElement ) { return; } $( cellElement ).removeClass('is-expanded'); console.log( 'Slide changed to ' + index ) });

I've added it to the last reduced Testcase.

[desandro]

@elli-pirelli

Start with something like this:

$carousel.on( 'change.flickity', function( event, index ) {
  $('.carousel-cell.is-expanded').removeClass('is-expanded');
});

[elli-pirelli]

Thanks.

the class is being removed however there is still a gab if you drag the slide. Is this because of the css or do I have to do something with the reposition?

https://codepen.io/elli-pirelli/pen/zbGLZR

[desandro]

This is likely a scrollbar issue. You can either force a scrollbar:

html { overflow-y: scroll; }

Or disable scrolling:

html { overflow-y: hidden; }