diff --git a/docs/pages/components/carousel.md b/docs/pages/components/carousel.md
index 25d8e76f5..220d49ebc 100644
--- a/docs/pages/components/carousel.md
+++ b/docs/pages/components/carousel.md
@@ -6,6 +6,7 @@ layout: component
 ---
 
 ```html:preview
+<sl-resize-observer>
 <sl-carousel pagination navigation mouse-dragging loop>
   <sl-carousel-item>
     <img
@@ -38,6 +39,7 @@ layout: component
     />
   </sl-carousel-item>
 </sl-carousel>
+</sl-resize-observer>
 ```
 
 ```jsx:react
diff --git a/src/components/carousel/carousel.component.ts b/src/components/carousel/carousel.component.ts
index c9883fa34..55cbbc1aa 100644
--- a/src/components/carousel/carousel.component.ts
+++ b/src/components/carousel/carousel.component.ts
@@ -381,10 +381,10 @@ export default class SlCarousel extends ShoelaceElement {
       this.createClones();
     }
 
-    this.synchronizeSlides();
-
     // Because the DOM may be changed, restore the scroll position to the active slide
     this.goToSlide(this.activeSlide, 'auto');
+
+    this.synchronizeSlides();
   }
 
   private createClones() {