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

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

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

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

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

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!
:slight_smile: