sl-carousel goToSlide has synchronous layout

[patrick-mcdougle]

Describe the bug

The initial render of the sl-carousel calls the initialize slides function which calls goToSlide. goToSlide uses getBoundingClientRect to determine the geometry of the slides to know how far to scroll them. This is fine in the case that your app is rendering 1 carousel, but components that render many carousels suffer from having a lot of synchronous layouts in a row. For example, on Rothy's collection pages, each of our product cards has a sl-carousel on them.

To Reproduce

1. Have multiple carousels on one page (and mount them all in the same tick)
2. Perform a performance capture on page load
3. See that each of the carousels has a forced relayout

Screenshots

Legible Flamechart

Zooming out we have 100 carousels!

Browser / OS

• OS: Mac
• Browser: Chrome
• Browser version: 131

Additional information

https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing https://gist.github.com/paulirish/5d52fb081b3570c81e3a

[patrick-mcdougle]

In the process of making a PR.

[claviska]

Thanks for the issue, and for taking a stab at a PR!