Images unloading in a slider

[SlimDeluxe]

I am using the lazy plugin inside an infinite slideable container (slick), but the thumbnails on one end are being unloaded if the two ends are shown. Please see this screen recording on Google Photos.

1. The loading state is shown.
2. I scroll 2 slides to the right.
3. I scroll back 4 slides. The glitch is obvious here.
4. Scroll back and the thumbs reappear.

Since your plugin does not have an unloading feature, do you have any idea what is going on? I tried turning off (not using) the plugin in the slider and the thumbs are not unloaded.

Here's the code:

var lazy_instance = $('.slidable-lazy', el).lazy({
            effect: 'fadeIn',
            effectTime: 200,
            chainable: false
        });
        $(el).slick({
            prevArrow: '<button type="button" class="slick-prev">Nazaj</button>',
            nextArrow: '<button type="button" class="slick-next">Naprej</button>',
            slidesToShow: $(el).data('per-page'),
            slidesToScroll: 1,
            lazyLoad: false,
        }).on('beforeChange', function(){
            lazy_instance.update();
        });

I need to call the update method because when sliding there's no scroll event on the container. But it has no effect on this, even if I remove that part of the code.

[dkern]

It's just a guess, because I don't know Slick. But I think the Problem is that Slick revert the loading an insert the original element to the slider again. But once the image was lazy-loaded your instance of Lazy will remove the image from the queue and from watching. This means on scrolling, the elements will be reset and you would need to re-add the elements to the Lazy instance.

You would need to find a way to prevent this. I can't help because i'm not familar with Slick.

[SlimDeluxe]

Thank you for a quick reply. You are correct, I have inspected the code and the slick plugin actually makes clones of the individual "slides" for an infinite slider. However after changing the lazy initialisation to include the clones after slick initialises, there was still one problem: if you scroll left immediately after loading, all thumbs dissapear until you scroll again in any direction. I was unable to resolve this and since I just wasted 2 hours on this, I just disabled the infinite mode. If I ever get back to this, I will share any solution I find.