From e2ade98173179fb4ff636c55e472781d22938bed Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Tue, 26 Nov 2024 10:46:23 +0100
Subject: [PATCH] Image carousel with two images are not scrollable #2589 #2598
 (#2669)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 Image carousel 2 items are now scrollable #2589

* 🐛 Add key on carousel item #2598
---
 web/core/Carousel/Carousel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
index 78818bff8..8cedeb95b 100644
--- a/web/core/Carousel/Carousel.tsx
+++ b/web/core/Carousel/Carousel.tsx
@@ -300,7 +300,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
         return (
           <CarouselIframeItem
             className="pt-lg"
-            key={item.id}
+            key={(item as IFrameCarouselItemData)._key}
             noOfSiblings={items.length}
             displayMode={displayMode}
             aria-label={ariaLabel}
@@ -356,7 +356,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
           variant === 'image' && displayMode === 'single'
             ? 'w-[var(--image-carousel-card-w-sm)] md:w-[var(--image-carousel-card-w-md)] lg:w-[var(--image-carousel-card-w-lg)] mx-auto col-start-1 col-end-1 row-start-2 row-end-2'
             : ''
-        } pt-6 pb-2 ${items.length === 2 ? 'lg:hidden' : ''} flex ${
+        } pt-6 pb-2 ${items.length === 3 ? 'lg:hidden' : ''} flex ${
           internalAutoRotation ? 'justify-between' : 'justify-end'
         }`}
       >