fix(carousel): handle infinite scroll with a single child element

eclipse-tractusx · Sep 13, 2024 · 6a3a2aa · 6a3a2aa
2 parents f39c355 + 4c2dcbf
commit 6a3a2aa
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/src/components/basic/Carousel/index.tsx b/src/components/basic/Carousel/index.tsx
@@ -75,7 +75,7 @@ export const Carousel = ({
 }: CarouselProps) => {
   const [showArrows, setShowArrows] = useState(false)
   const onMouseEnter = () => {
-    setShowArrows(true)
+    setShowArrows(arrayChildren.length > 1)
   }
   const onMouseLeave = () => {
     setShowArrows(false)
@@ -155,7 +155,9 @@ export const Carousel = ({
 
   const settings = {
     dots,
-    infinite,
+    // @ref https://github.com/akiran/react-slick/issues/2093#issuecomment-1705213915
+    // Prevents broken UI by defaulting infinite scroll to false when only a single child element is present.
+    infinite: infinite && arrayChildren.length > 1,
     slidesToShow: responsiveSlides,
     slidesToScroll: responsiveSlides,
     swipeToSlide: false,