Refactor carousel to use fade transition

Replaced the slide transition with a fade transition for a smoother visual effect.

Author: lovable-dev[bot]

src/components/ui/carousel/Carousel.tsx

@@ -25,6 +25,9 @@ export const Carousel = React.forwardRef<
       {
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
+        dragFree: false,
+        draggable: false,
+        duration: 30, // Transition plus rapide pour le fade
       },
       plugins
     )

src/components/ui/carousel/CarouselContent.tsx

@@ -10,18 +10,15 @@ export const CarouselContent = React.forwardRef<
   const { carouselRef, orientation } = useCarousel()
 
   return (
-    <div className="overflow-hidden">
-      <div ref={carouselRef} className="overflow-visible">
-        <div
-          ref={ref}
-          className={cn(
-            "flex",
-            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-            className
-          )}
-          {...props}
-        />
-      </div>
+    <div ref={carouselRef} className="overflow-visible">
+      <div
+        ref={ref}
+        className={cn(
+          "relative w-full h-full",
+          className
+        )}
+        {...props}
+      />
     </div>
   )
 })

src/components/ui/carousel/CarouselItem.tsx

@@ -7,16 +7,42 @@ export const CarouselItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
+  const { api } = useCarousel()
+  const [isActive, setIsActive] = React.useState(false)
+  const itemRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    if (!api || !itemRef.current) return
+
+    const updateActiveState = () => {
+      const slides = api.slideNodes()
+      const currentSlide = api.selectedScrollSnap()
+      const slideIndex = slides.indexOf(itemRef.current!)
+      setIsActive(slideIndex === currentSlide)
+    }
+
+    updateActiveState()
+    api.on('select', updateActiveState)
+    api.on('reInit', updateActiveState)
+
+    return () => {
+      api.off('select', updateActiveState)
+      api.off('reInit', updateActiveState)
+    }
+  }, [api])
 
   return (
     <div
-      ref={ref}
+      ref={(node) => {
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+        itemRef.current = node
+      }}
       role="group"
       aria-roledescription="slide"
       className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+        "absolute inset-0 w-full transition-opacity duration-500",
+        isActive ? "opacity-100 z-10" : "opacity-0 z-0",
         className
       )}
       {...props}