Strategy for Moving Widgets Outside Wrapper

[ryanfitzer]

Due to the overflow: hidden on the carousel wrapper, all widgets are restricted from using css to position them outside of the wrapper.

For example, if I wanted to add a border to the carousel wrapper and needed the Previous and Next buttons to be visually placed outside of that border, absolutely positioning them to be outside won't work. They would just be visually hidden due to the wrapper's overflow: hidden property.

I imagine there is some way to create a widget that can be used to simply pass it's props onto some outside component, but I'm not really sure of the best way to do that. Any advice?

[amio]

Hmm, I think the widgets should be placed outside to support this use case.

[ryanfitzer]

Are you saying you will update the carousel to place widgets outside?

[amio]

Yeap, done in 57a6ed2

[amio]

I've created a new release including this change, see if it works as expected @ryanfitzer

[ryanfitzer]

Sweet! I'll give it try today. Thanks for the quick turnaround.

[ryanfitzer]

Works like a charm. Thanks again.

[ryanfitzer]

I think there might have been a regression in the prev animation when in loop mode. The current frame animates to the right and the incoming frame animates in from the left, overlapping the current frame's animation.

[amio]

It looks fine on the example page 🤔
Maybe something else causing this?

[ryanfitzer]

Figured it out. Only happens when you use loop AND have only 2 frames. Add a 3rd frame and the issue goes away. I'll open a new issue and see if I can track it down.