feat: support function form for carousel imageProps

Allow imageProps to be a function that receives the current slide,
enabling per-slide image attributes.

Author: igordanchenko

src/components/ImageSlide.tsx

@@ -131,7 +131,11 @@ export function ImageSlide({
   const sizes =
     srcSet && rect && hasWindow() ? `${Math.round(Math.min(estimateActualWidth(), rect.width))}px` : undefined;
 
-  const { style: imagePropsStyle, className: imagePropsClassName, ...restImageProps } = imageProps || {};
+  const {
+    style: imagePropsStyle,
+    className: imagePropsClassName,
+    ...restImageProps
+  } = (typeof imageProps === "function" ? imageProps(image) : imageProps) || {};
 
   return (
     <>

src/types.ts

@@ -180,14 +180,16 @@ export interface CarouselSettings {
   /** `object-fit` setting for image slides */
   imageFit: ImageFit;
   /** custom image attributes */
-  imageProps: Omit<
-    React.ImgHTMLAttributes<HTMLImageElement>,
-    "src" | "alt" | "sizes" | "srcSet" | "onLoad" | "onError" | "onClick"
-  >;
+  imageProps: ImageProps | ((slide: Slide) => ImageProps);
 }
 
 export type LengthOrPercentage = `${number}px` | `${number}%` | number;
 
+export type ImageProps = Omit<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  "src" | "alt" | "sizes" | "srcSet" | "onLoad" | "onError" | "onClick"
+>;
+
 /** Animation settings */
 export interface AnimationSettings {
   /** fade-in / fade-out animation settings */