Слайдер Swiper не работает после бесконечной прокрутки загрузить больше информации

Question

Я использую Swiper Slider для некоторых изображений на домашней странице с бесконечная прокрутка , чтобы загрузить дополнительную информацию о прокрутке на платформе Opencart.

Проблема возникает, когдая прокручиваю вниз, и больше контента загружается с бесконечной прокруткой, чем стрелки Swiper Slider не работают для нового контента

Я инициализирую Swiper в нижнем колонтитуле, чтобы быть уверенным, что будет инициализирован после загрузки домой, даже если я делаю это с цикломно все та же проблема

Есть идеи, как мне решить эту проблему?

Swiper

$(".swiper-container").each(function(index, element) {
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination'
        },
        spaceBetween: 10,
    });
});

Бесконечный свиток

 $("#listproduct").addClass("infinitescroll");
 var $container = $('.infinitescroll');

 $container.infinitescroll({
     navSelector: ".pagination",
     nextSelector: ".next-pagination",
     itemSelector: ".product-layout",
     history: 'push',
     loading: {
         msgText: "Loading ....",
     }
 },

ОБНОВЛЕНИЕ

Мне удается заставить его работать со следующими изменениями

Swiper

var options = {
        slidesPerView: 1,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination'
        },
        spaceBetween: 10,
    },

swiper = new Swiper('.swiper-container', options);

Бесконечный

$("#listproduct").addClass("infinitescroll");
var $container = $('.infinitescroll');

 $container.infinitescroll({
 navSelector: ".pagination",
 nextSelector: ".next-pagination",
 itemSelector: ".product-layout",
 history: 'push',
 loading: {
     msgText: "Loading ....",
 }
},function(){
 swiper = new Swiper('.swiper-container', options);
}

Answer 1

Swiper имеет метод update в его API :

swiper.update();

Вам необходимо запустить его в бесконечной прокрутке load event Обратный вызов . Это может выглядеть так:

$container.on( 'load.infiniteScroll', function() {
    swiper.update();
});

Answer 2

Похоже, что уничтожение вызывается где-то в бесконечной прокрутке, и Swiper должен быть повторно инициализирован после завершения загрузки, это будет работать для v2 бесконечной

Swiper

var options = {
    slidesPerView: 1,
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination'
    },
    spaceBetween: 10,
},

swiper = new Swiper('.swiper-container', options);

Infinite

$("#listproduct").addClass("infinitescroll");
var $container = $('.infinitescroll');

 $container.infinitescroll({
 navSelector: ".pagination",
 nextSelector: ".next-pagination",
 itemSelector: ".product-layout",
 history: 'push',
 loading: {
     msgText: "Loading ....",
 }
},function(){
 swiper = new Swiper('.swiper-container', options);
}