search

Emiliano-Bucci / react-spring-carousel-js

A new Carousel experience for the modern Web
https://react-spring-carousel-js.emilianobucci.com
80 stars 6 forks source link

Force resize on fullscreen change #21

Closed robheritage closed 2 years ago

robheritage commented 2 years ago

Hi, I am having an issue where the slides move out of sync when toggling fullscreen mode. This happens when the carousel does not fill the window's width, e.g. it is within a fixed width container on the page and then when in fullscreen mode, it does fill the window width. My guess is because handleResize does not proceed due to the window's width being the same as before? If I resize the window it obviously then all comes back in to sync with the correct slide selected.

Is there a way to force a resize when toggling fullscreen mode?

robheritage commented 2 years ago

A little more on this. It looks like the problem lies with the use-spring-carousel-animated-wrapper container styles. When entering fullscreen the left CSS property is updated, but the translate3d property is not:

Before fullscreen: image

Fullscreen: image

What it should be: image

After exit fullscreen, translate3d keeps the fullscreen style: image

Emiliano-Bucci commented 2 years ago

@robheritage Hi! I see; i will check, but i believe i've already fix this issue in the version 2 i'm ready to release before the end of the year :) I'll let you know when it will be release. Thanks!

robheritage commented 2 years ago

@robheritage Hi! I see; i will check, but i believe i've already fix this issue in the version 2 i'm ready to release before the end of the year :) I'll let you know when it will be release. Thanks!

Perfect, looking forward to the release.

Emiliano-Bucci commented 2 years ago

@robheritage Hi! Version 2 has been released -> https://react-spring-carousel.emilianobucci.com/ Please check if the issue was fixed :)