Currently when I load my slider from swiper.js gatsby image automatically loads all of the images even though they are not visible to the end user. This is not the behavior I want. I want to only load the images for the slide visible or thumbnail slides visible. Does anyone have a solution for this?
It should be managed automatically since Gatsby adds the lazy loading by default.
In gatsby-image (v2): the loading property controls this behavior.
Set the browser’s native lazy loading attribute. One of lazy, eager or auto. Defaults to lazy.
In gatsby-image-plugin (v3): the same loading property controls this behavior:
Loading behavior for the image. You should set this to "eager" for above-the-fold images to ensure they start loading before React hydration. Defaults to lazy.
In Swiper, in addition, you have a bunch of properties that you can lift to the Swiper component, in your case, lazy is what you are looking for:
let params = {
// other props
lazy: true,
};
Then just use it like:
<Swiper {...params}>
// your slides here
</Swiper>