Lazy loading when slides.perView > 1

[Raf-sns]

Hi ! Thanks for kee-slider which is a very nice program.

I encounter a problem: I tried to implement lazy loading with 3 images per view (but this is determined by breakpoints).

I have a default slides.perView value of 3.

I followed the example but I encountered a problem: The first image loads at startup, but not the next two which should be the first 3 visible images of the slider.

I have autoscroll and when it does, only the first image in the group of 3 images loads lazily.

Do you have any advice on this?

Sincerely, Raf

Here my function who launch keen-slider :

/**
 * $.launch_slider();
 *
 * @return {void}  init Keen-Slider
 */
launch_slider: function(Template) {

    // re-init Slider
    if (Slider != null) {

        Slider.destroy();
        Slider = null;
    }

    // not activate slider if not present
    if ($('#keen-slider').length == 0) {
        return;
    }

    // easing functions for `defaultAnimation`
    const easeOutCubic = (x) => {
        return 1 - Math.pow(1 - x, 3);
    }
    // or
    const easeOutSine = (x) => {
        return Math.sin((x * Math.PI) / 2);
    }

    // keen-slider container #id
    let Keen_Container = '#keen-slider';

    let Spacing = 0;

    // animation duration
    let AnimationDuration = 1000;

    // delay to slide next image
    let DelayToSlide = 5000;

    // lazy loading
    let Folder_imgs;
    let Nb_imgs;
    let Slider_imgs = [];
    let Slider_slides;
    let Container = document.getElementById('keen-slider');

    switch (Template) {
        case 'gite':
            Folder_imgs = 'GITE';
            Nb_imgs = 16;
            break;
        case 'home':
            Folder_imgs = 'SITE';
            Nb_imgs = 8;
            break;
    }

    for (var i = 1; i <= Nb_imgs; i++) {
        // push list of urls
        Slider_imgs.push(`IMGS/` + Folder_imgs + `/` + i + `.webp`);
        // create slides div
        Slider_slides = document.createElement('div');
        Slider_slides.classList.add('keen-slider__slide', 'lazy__slide');
        let img = document.createElement('img');
        // append imgs to slide
        Slider_slides.append(img);
        // append slide to container
        Container.append(Slider_slides);
    }

    let loaded = [];

    function loadImages(s) {

        const slideIdx = s.track.details.rel;

        loaded[slideIdx] = true;

        s.slides.forEach((element, idx) => {

            if (loaded[idx])
                element.querySelector("img").setAttribute("src", Slider_imgs[idx])
        });
    }
    // end lazy loading

    // KEEN-SLIDER
    Slider = new KeenSlider(Keen_Container, {
            animationEnded: loadImages,
            created: loadImages,
            mode: 'free-snap',
            // renderMode: 'performance',
            defaultAnimation: {
                duration: AnimationDuration,
                easing: easeOutSine,
            },
            loop: true,
            slides: {
                perView: 3,
                spacing: Spacing,
            },
            breakpoints: {
                '(min-width: 1500px)': {
                    slides: {
                        perView: 4,
                        spacing: Spacing,
                    },
                },
                '(max-width: 800px)': {
                    slides: {
                        perView: 2,
                        spacing: Spacing,
                    },
                },
                '(max-width: 600px)': {
                    slides: {
                        perView: 1,
                        spacing: Spacing,
                    },
                },
            },
        },
        [
            (slider) => {
                let timeout;
                let mouseOver = false;

                function clearNextTimeout() {

                    clearTimeout(timeout);
                }

                function nextTimeout() {

                    clearTimeout(timeout);

                    if (mouseOver) return;

                    timeout = setTimeout(() => {

                        slider.next();

                    }, DelayToSlide);
                }
                slider.on('created', () => {

                    slider.container.addEventListener('mouseenter', () => {
                        mouseOver = true
                        clearNextTimeout()
                    });

                    // slider.container.addEventListener('mouseout', () => {
                    //     mouseOver = false;
                    //     nextTimeout();
                    // });

                    nextTimeout();
                });

                slider.on('dragStarted', clearNextTimeout);
                slider.on('dragEnded', function() {
                    mouseOver = false;
                    nextTimeout
                });
                slider.on('animationEnded', nextTimeout);
                slider.on('updated', nextTimeout);
            }
        ]
    );

},
/**
 * $.launch_slider();
 */