Swiper with lazy loading and auto slides per view does not load next image or next ones

[rapgithub]

I am having some issues using swiper with lazy loading images and auto slides per view, I have tested all swiper options and configurations and nothings seems to fix that problem!

Problem: next images in view are never loaded and when I slide it to the next it loads the next but the others remains all the time unloaded…

Problem:

The images are loaded after requested via api…

                    self.$setState({
                        effect: 'fade',
                        loading_st: true,
                        st: [1,2,3,4,5....], //here array with images of stores returned
                    });

                    var swiper_st = app.swiper.create(
                        '.swiper-container.st', {
                            lazy: {
                                threshold: 50,
                                sequential: false,
                                observer: true,
                                loadPrevNext: true,
                                loadPrevNextAmount: 2,
                                loadOnTransitionStart: false
                            },
                            loop: false,
                            loadPrevNextAmount: 2, //seems not to work as well
                            slidesPerView: 'auto', //does not load the next image in view
                            spaceBetween: 10,
                            pagination: {
                                el: '.swiper-pagination',
                                dynamicBullets: false,
                                //type: 'progressbar',
                                clickable: true,
                            },
                            scrollbar: {
                                el: '.swiper-scrollbar',
                                hide: false,
                            },
                            on: {
                                doubleTap: function (e) {

                                    var $ = this.$;
                                    var st_id = $(e.target).attr('data-id');
                                    console.log({
                                        st: st_id 
                                    });

                                }
                            }
                        });

Anyway to fix this and make the next images in view when using auto slides per view to load properly and all the rest?

thanks

[nolimits4web]

self.$setState({
  effect: 'fade',
  loading_st: true,
  st: [1,2,3,4,5....], //here array with images of stores returned
}).then(() => {
  // init swiper
});

[rapgithub]

I will try that and let you know if fixed! thanks for the reply Vladimir!

[rapgithub]

I have applied this code but it seems that the problem still is there in the second slider but not the third one, I will try to review the code line by line and post my feedback soon!

thanks Vladimir

[rapgithub]

Testing and testing the above solution did not help too much to fix that problem with auto slides not loading next image on view with lazy but I found that adding this below solved the issue and now the next slides on view using auto slides per view is loaded perfectly as it should!

                var swiper_str = self.$app.swiper.create(
                  '.swiper-container.str', {
                    lazy: {
                      threshold: 50,
                      loadPrevNext: true,
                      loadPrevNextAmount: 2,
                    },
                    centeredSlides: false, //added this one
                    watchSlidesVisibility: true, //added this one
                    observer: true,
                    loop: false,
                    initialSlide: 0,
                    preloadImages: false,
                    lazy: true,
                    slidesPerView: '4',
                    spaceBetween: 10,
                    pagination: {
                      el: '.swiper-pagination',
                      dynamicBullets: false,
                    },
                    scrollbar: {
                      el: '.swiper-scrollbar',
                      hide: true,
                    },
                    on: {
...
});

I think that this solved my issue:

centeredSlides: false,
watchSlidesVisibility: true,

Good to know!

[adinvadim]

Your code is working, because you have slidesPerView: '4', instead slidesPerView: 'auto'. With slidePerView N preloading work great