Switching between first and second slide does not work correctly in <sl-carousel>

[alexnozer]

Describe the bug

I was using the <sl-carousel> on a project and noticed a bug with switching between the first and second slides. At first I assumed that the problem was on my side. But then I opened the examples from the documentation and found the same bug there. I noticed that it happens when using loop.

To Reproduce

Steps to reproduce the behavior:

1. Go to the first <sl-carousel> example on the documentation site
2. Сlick on the next arrow
3. The pagination bullet changed, but the slide did not changed
4. Click on the next arrow again
5. The pagination bullet has changed, the slide changed from the first to the third
6. Click on the first pagination bullet
7. Click on the second pagination bullet
8. The slide did not changed again

Demo

The video demonstrates a problem with slides switching:

sl-carousel-bug.webm

Browser / OS

• OS: Windows 10
• Browser: Chrome
• Browser version: 121.0.6167.140

Additional information

I also checked this issue on macOS Sonoma in Safari 17 and got the same result.

[CetinSert]

Link: https://shoelace.style/components/carousel

---

✔️ Works fine

Browser / OS

• OS: Windows 11 23H2
• Browser: Edge 120; Chrome 121; Firefox 122

---

❌ Same issue

Browser / OS

• OS: macOS Sonoma 14.2.1
• Browser: Safari 17.2.1; Edge 120