Lazy loading images in a carousel

[mbuguanewton]

Hi,

Can we load images in a carousel, where for example once the first image is in view and loaded we can also load the second image without waiting until its in view?

Sample code:

import useDimensions from "react-cool-dimensions"
import { LazyloadImage, trackWindowScroll } from 'react-lazy-load-image-component';
import { Carousel, CarouselDots, CarouselNext, CarouselItem, CarouselContent, CarouselPrevious } from "@components/ui/carousel" // Shadcn Carousel Component


function Image({ children, width = 500, height = 500, ...imgProps }) {
  return (
      <LazyLoadImage
	  width={width}
	  effect="blur"
	  height={height}
	  wrapperClassName="w-full h-full"
	  placeholder={
              <div
                className="w-full h-full bg-gray-50 animate-pulse"
                style={{ width, height }} />
	  }
	  loading="lazy"
	  {...imgProps}
      />
  );
}

function GalleryCarousel({ slides, className, theme, scrollPosition }) {
    const { observe, height, width } = useDimensions();

    return (
        <Carousel opts={{ loop: true }} className={cn('h-full', className)}>
	    <CarouselContent className="h-full">
                {slides.map((slide, index) => (
	            <CarouselItem ref={observe} key={index} className="relative h-full">
		      <Image
	                height={height || 500}
	                src={slide.src}
	                alt={slide.alt}
	                width={width || 500}
	                scrollPosition={scrollPosition}
	                className="object-cover w-full h-full"
		      />
	            </CarouselItem>
                ))}
	    </CarouselContent>
	    <CarouselDots className="absolute bg-opacity-50 bottom-8" />
	    <div className="absolute z-10 flex items-center justify-between w-full h-auto -translate-y-1/2 top-1/2">
                <CarouselPrevious
	            variant="unstyled"
	            className={cn(
		        'relative left-0 top-0 -translate-y-0 h-14 w-16 p-4 bg-white rounded-none rounded-r-full ',
		        { 'bg-core-blue text-white': theme === 'dark' }
	              )} />
                <CarouselNext
	            variant="unstyled"
	            className={cn(
		        'relative right-0 top-0 -translate-y-0 h-14 w-16 p-4 bg-white rounded-none rounded-l-full ',
		        { 'bg-core-blue text-white': theme === 'dark' }
	              )} />
	    </div>
        </Carousel>
    );
}

export default trackWindowScroll(GalleryCarousel)