search

BotDanny / react-stacked-center-carousel

A responsive, performant, well animated, swipeable, center mode carousel that stacks its slide
33 stars 12 forks source link

The resizer is not working #13

Closed zephy20 closed 1 year ago

zephy20 commented 1 year ago

I have a sidebar in my app that can be closed or open and based on that, the width of the right container is changed. But the carousel doesn't resize itself to adjust to the new width, what is the issue?

BotDanny commented 1 year ago

Hi, the carousel changes its width only when its parent's width changes. I am pretty sure that your right container width did not change. Here is a codesandbox example, watch for the CSS file and the use of CSS class name on line 83 of App.js

zephy20 commented 1 year ago

Thanks for taking out time! I noticed that, even in the example you posted above, the carousel is not resizing when I change the window size. I noticed that, in case of the Twitch example you showed here(https://botdanny.github.io/react-stacked-center-carousel/#/twitch), the resize perfectly works if I resize the window. What could be the issue here?

Screenshot 2022-10-27 at 11 52 19 PM

zephy20 commented 1 year ago

Found the issue: If there is a parent of the carousel whose display: flex is applied, then it will cause the resizer to not detect changes in the width. Solution: Wrapped the carousel in a absolutely positioned div and now it works!

Thanks for the help!

BotDanny commented 1 year ago

Hi, I updated the code sandbox to have it work. You can look at styles.css. Essentially, the carousel watches your parent element. If the carousel width doesn't change as your window width change, then it means the parent of your carousel isn't changing according to window size. The problem is your parent component, not the carousel itself.