Looping Carousel is out of order when inside of Sl-Resize-Observer

[colin-as]

Describe the bug

I'm using sl-resize-observer to watch for changes to a carousel. When the loop property is applied to the carousel, the carousel show the last slide item first and then displayed the slides in the correct order.

The carousel render in the correct order when:

1. the carousel is not inside the resize observer,
2. the loop property is not applied

For context, I am using the resize observer to change the carousel's properties depending on mobile or desktop.

    $resizeObserver.addEventListener('sl-resize', event => {
      const { target } = event.detail.entries[0]
      const carouselWidth = target.getBoundingClientRect().width

      if (carouselWidth  <= 768) {
        target.setAttribute('pagination', true)
        target.removeAttribute('navigation')
      } else {
        target.removeAttribute('pagination')
        target.setAttribute('navigation', true)
      }
    });

if there is a better way to handle that please let me know :)

To Reproduce

Steps to reproduce the behavior:

1. clone my repo: https://github.com/colin-as/sl-carousel-bug
2. open in your browser
3. compare the order of the slides when the loop parameter is applied

Demo

Demo Repo: https://github.com/colin-as/sl-carousel-bug

Browser / OS

• OS: Mac
• Browser: Chrome
• Browser version: 124.0.6367.62 (Official Build) (arm64)

Additional information

Provide any additional information about the bug here.

Thank you!