Vue-carousel: Feature Request: Add support for lazy load images

[kenyk7]

[elviskudo]

thanks for your awesome product, but now i think my images very slow to load, please added with lazy load, thanks

[gmiserez]

Hi,

I am currently confronted with the same issue.
A solution in my opinion could be to use the index of the displayed item in order to only render the current image and the ones immediately on the left and right, like this:

<carousel :per-page="1" :navigate-to="activeImageIndex"> <slide v-for="(picture, index) in pictures"> <img v-if="index >= activeImageIndex - 1 && index <= activeImageIndex + 1" v-bind:src="picture.src"> </slide> </carousel>

However, there is afaik no way to get the index of the displayed slide (correct me if i'm wrong). The navigate-to property is only a one-way binding.
So it would be really nice to somehow be able to retrieve the index of the displayed slide. Please let me know if I am mistaken and this is already possible or if you want me to make a separate feature request for that.

Edit: just saw this post:
https://github.com/SSENSE/vue-carousel/issues/80#issuecomment-339235038
Will try mixing this with my code from above and provide feedback.

[besnikh]

Any update on lazy support ?

[quinnlangille]

Hey @besnikh, we've had no contributor interest in developing this feature yet. I'll flag as a help wanted to see if we can attract some more attention. The feature would be pretty use imo

If you or anyone watching this thread has a homebrewed solution, feel free to open a pr :~)

[gmiserez]

Hello @besnikh,
Completely forgot this topic. It works with the solution I suggested before. Basically you add a v-if condition around your picture and test the picture index against the currently displayed index.

Sample here:
https://jsfiddle.net/6ncxya9h/1/

[elviskudo]

thanks @gmiserez

[besnikh]

@gmiserez
Thnx I will try it now :+1: