Swiper in react lazy loads all images at once

Question

why the npm library swiper version 10 used within a next.js 13.3 or above (now on 13.5) project, when I set the images to lazy load as for instance

<SwiperSlide>
    <img src="/images/1.png" loading="lazy" width="1200" height="800" alt="image" />
    <div className="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</SwiperSlide>
<SwiperSlide>
    <img src="/images/2.png" loading="lazy" width="1200" height="800" alt="image" />
    <div className="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
</SwiperSlide>
...10 more

on 12 different slides, they all lazy load at once when reaching the slider instead of lazy load one by one when swiping the slider' slides?

my swiper initiation is:

        <Swiper
            ref={slides}
            effect={"cards"}
            grabCursor={true}
            modules={[Controller, EffectCards, Mousewheel]}
            lazy={true} //also tried ="true"
            loop={true}
            speed={600}
            direction="horizontal"
            mousewheel={{
                forceToAxis: true,
                invert: true,
                thresholdDelta: 6,
                sensitivity: .2
            }}
            edgeSwipeDetection="prevent"
            controller={{ control: controlledSwiper }}
            className={sectionInters ? `worksSwiper ${styles.worksSwiper} ${styles.visible}` : `worksSwiper ${styles.worksSwiper}`}
        >