Vue-awesome-swiper: lazy & loop (bug)

[songoo]

Hello

Steps to reproduce

                swiperOptionA: {
                    lazy: true,
                    slidesPerView: 4,
                    spaceBetween: 8,
                    loop: true,
                    centeredSlides: true,

What is Expected?

Centered slides which are lazily loaded, with no white space on left at the start

What is actually happening?

Images added by 'loop' are not lazy loaded, screenshot - https://imgur.com/a/A4P3FSl , if I continue one slide to left, just middle one gets loaded (screen https://imgur.com/a/tN8bU1c).

[ghost]

loop functionality is duplicating only DOM nodes, meaning that your duplicated slides for the loop don't have their JS code appended as well, only the rendered result.

I spent 2 days trying to figure this out, so by using the original Swiper's methods and events, I came to a semi-infinite-loop feature:

add the following to your swiper's config

loop: true,
loopedSlides: 1,
on: {
slideChange: function () {
let lastVisibleItem = this.realIndex + this.params.slidesPerView
let slidesLength = this.slides.length - 2
let lastVisibleIndex = this.realIndex + this.params.slidesPerView
// if swiper reaches the end of displayed items, goToNext redirects swiper to the start
if (lastVisibleItem > slidesLength) {
this.slideTo(1)
}
// if swiper wants to go before the first item, then forward swiper to the last item
if (lastVisibleIndex >= this.slides.length) {
this.slideTo((slidesLength - this.params.slidesPerView) + 1)
}
}
}