diff --git a/src/components/carousel/carousel.component.ts b/src/components/carousel/carousel.component.ts index bd38590fd..fd0cb5b24 100644 --- a/src/components/carousel/carousel.component.ts +++ b/src/components/carousel/carousel.component.ts @@ -94,7 +94,7 @@ export default class SlCarousel extends ShoelaceElement { private autoplayController = new AutoplayController(this, () => this.next()); private readonly localize = new LocalizeController(this); private mutationObserver: MutationObserver; - private pendingInteractionScroll = false; + private pendingSlideChange = false; connectedCallback(): void { super.connectedCallback(); @@ -262,7 +262,7 @@ export default class SlCarousel extends ShoelaceElement { @eventOptions({ passive: true }) private handleScroll() { this.scrolling = true; - if (!this.pendingInteractionScroll) { + if (!this.pendingSlideChange) { this.synchronizeSlides(); } } @@ -320,7 +320,7 @@ export default class SlCarousel extends ShoelaceElement { private handleScrollEnd() { if (!this.scrolling || this.dragging) return; this.scrolling = false; - this.pendingInteractionScroll = false; + this.pendingSlideChange = false; this.synchronizeSlides(); } @@ -496,12 +496,14 @@ export default class SlCarousel extends ShoelaceElement { const nextLeft = nextSlideRect.left - scrollContainerRect.left; const nextTop = nextSlideRect.top - scrollContainerRect.top; - this.pendingInteractionScroll = true; - scrollContainer.scrollTo({ - left: nextLeft + scrollContainer.scrollLeft, - top: nextTop + scrollContainer.scrollTop, - behavior - }); + if (nextLeft || nextTop) { + this.pendingSlideChange = true; + scrollContainer.scrollTo({ + left: nextLeft + scrollContainer.scrollLeft, + top: nextTop + scrollContainer.scrollTop, + behavior + }); + } } render() {