diff --git a/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html b/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html
index 2ef9fd318d52..5e35c291deef 100644
--- a/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html
+++ b/projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html
@@ -150,6 +150,7 @@ <h3 *ngIf="result.products?.length">
         [template]="carouselItem"
         itemWidth="160px"
         (keybordEvent)="carouselEventPropagator($event)"
+        (mousedown)="preventDefault($event)"
       >
       </cx-carousel>
 
diff --git a/projects/storefrontlib/shared/components/carousel/carousel.component.html b/projects/storefrontlib/shared/components/carousel/carousel.component.html
index ea947ca2ed18..450b474e42b8 100644
--- a/projects/storefrontlib/shared/components/carousel/carousel.component.html
+++ b/projects/storefrontlib/shared/components/carousel/carousel.component.html
@@ -57,12 +57,7 @@ <h2 *ngIf="title">{{ title }}</h2>
     <button
       *ngIf="size < items.length"
       class="next"
-      (click)="
-        $event.stopPropagation();
-        activeSlide > items.length - size - 1
-          ? null
-          : (activeSlide = activeSlide + size)
-      "
+      (click)="onNextClick($event, size)"
       [attr.aria-disabled]="activeSlide > items.length - size - 1"
       [attr.aria-label]="'carousel.nextSlide' | cxTranslate"
       [attr.title]="'carousel.nextSlide' | cxTranslate"
diff --git a/projects/storefrontlib/shared/components/carousel/carousel.component.ts b/projects/storefrontlib/shared/components/carousel/carousel.component.ts
index bf4bb8101670..e75e698da2b0 100644
--- a/projects/storefrontlib/shared/components/carousel/carousel.component.ts
+++ b/projects/storefrontlib/shared/components/carousel/carousel.component.ts
@@ -151,6 +151,19 @@ export class CarouselComponent implements OnInit, OnChanges {
       .getItemsPerSlide(this.el.nativeElement, this.itemWidth)
       .pipe(tap(() => (this.activeSlide = 0)));
   }
+  /**
+   * Handler for the "next" button click.
+   */
+  onNextClick(event: MouseEvent, size: number): void {
+    event.stopPropagation();
+
+    const itemsLength = this.items?.length ?? 0;
+    const canMove = this.activeSlide <= itemsLength - size - 1;
+
+    if (canMove) {
+      this.activeSlide = this.activeSlide + size;
+    }
+  }
 
   onItemKeydown(event: KeyboardEvent, size: number): void {
     switch (event.key) {