Next.js Image Lazy Loading with Swiper Demo

This demo proves that Next.js Image and Swiper work well together using the same loading="lazy" API. Check out the code below and let me know what you think.

• Both use the same lazy loading API
• No extra setup needed
• Images load when you scroll to them
• Scroll down to see it work

<SwiperSlide key={index}>
  <div className="relative aspect-[2/1] w-full">
    <Image
      src={src}
      alt={`Slide ${index + 1}`}
      fill
      className="object-cover rounded-lg"
      sizes="(max-width: 768px) 100vw, 800px"
      loading="lazy"
    />
  </div>
</SwiperSlide>