🐛 fix image carousel for two items (#2461)

equinor · Aug 16, 2024 · 1a0f353 · 1a0f353
1 parent 3d840f2
commit 1a0f353
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
@@ -19,7 +19,6 @@ import { PortableTextBlock } from '@portabletext/types'
 import { toPlainText } from '@portabletext/react'
 import { useMediaQuery } from '../../lib/hooks/useMediaQuery'
 import { CarouselEventItem } from './CarouselEventItem'
-import { ScrollbarEvents } from 'swiper/types'
 
 export type DisplayModes = 'single' | 'scroll'
 export type Layouts = 'full' | 'default'
@@ -49,7 +48,6 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
     items,
     variant = 'video',
     displayMode = 'scroll',
-    //layout = 'full',
     autoRotation = false,
     labelledbyId,
     title,
@@ -60,14 +58,13 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
   ref,
 ) {
   const CarouselTag = hasSectionTitle ? (`div` as ElementType) : (`section` as ElementType)
-  //TODO translations
   const carouselItemsId = useId()
   const controlsId = useId()
   const sliderRef = useRef<HTMLUListElement>(null)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
   //a prefers-reduced-motion user setting must always override autoplay
   const prefersReducedMotion = usePrefersReducedMotion()
-  const internalAutoRotation = prefersReducedMotion ? false : autoRotation
+  const internalAutoRotation = prefersReducedMotion ? false : autoRotation && displayMode === 'single'
   const [currentIndex, setCurrentIndex] = useState(0)
   const [currentXPosition, setCurrentXPosition] = useState(0)
   const [currentListTranslateX, setCurrentListTranslateX] = useState(0)
@@ -223,7 +220,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
     image: `${
       displayMode === 'single'
         ? 'grid transition-transform ease-scroll delay-0 duration-[800ms]'
-        : 'flex gap-3 md:gap-8 lg:gap-12 w-full h-full overflow-y-hidden'
+        : 'flex gap-3 md:gap-8 w-full h-full overflow-y-hidden no-scrollbar'
     }`,
     event: `flex gap-3 lg:gap-6 w-full h-full overflow-y-hidden no-scrollbar`,
   }
@@ -258,10 +255,8 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
                 style: {
                   transform: `translate3d(${itemsXPositions[i]}px, 0px, 0px)`,
                 },
+                onFocus: () => cancelTimeout(),
               })}
-            onFocus={() => {
-              cancelTimeout()
-            }}
           />
         )
       case 'event':
@@ -369,8 +364,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
         ref={sliderRef}
         id={carouselItemsId}
         className={envisTwMerge(
-          `transparent-scrollbar
-          transition-all
+          `transition-all
           duration-300
           m-auto
           ${variant === 'event' ? 'p-[2px]' : ''}

diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
@@ -26,17 +26,23 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
       aria-hidden={!active}
       aria-roledescription="slide"
       className={envisTwMerge(
-        `aspect-4/5
+        `
+        aspect-4/5
         md:aspect-video
         relative
         h-full
-        ${!active && displayMode === 'single' ? 'opacity-30' : ''}
+        ${
+          displayMode === 'single'
+            ? `
         transition-opacity
         duration-1000
-        ease-[ease]
+        ease-[ease]`
+            : 'shrink-0'
+        }
+        ${!active && displayMode === 'single' ? 'opacity-30' : ''}
         ${
           displayMode === 'scroll'
-            ? 'snap-center scroll-ml-6 shrink-0'
+            ? 'w-[80%] snap-center scroll-ml-6'
             : 'w-[var(--image-carousel-card-w-sm)] md:w-[var(--image-carousel-card-w-md)] lg:w-[var(--image-carousel-card-w-lg)] ms-2 me-2 col-start-1 col-end-1 row-start-1 row-end-1'
         }
         `,

diff --git a/web/sections/ImageCarousel/ImageCarousel.tsx b/web/sections/ImageCarousel/ImageCarousel.tsx
@@ -35,9 +35,8 @@ const ImageCarousel = forwardRef<HTMLUListElement, ImageCarouselProps>(function
       <Carousel
         ref={ref}
         items={items}
-        displayMode="single"
+        displayMode={items?.length < 3 ? 'scroll' : 'single'}
         variant="image"
-        layout="full"
         hasSectionTitle={!!title}
         labelledbyId={title ? headingId : undefined}
         title={title}