Swiper slider do not work after infinite scroll load more information

Question

I'm using Swiper slider for some images on homepage with infinite scroll to load more information on scrolling on Opencart platform.

The problem is coming when i scrolling down and more content is loaded with infinite scroll than Swiper Slider arrows are not working for the new content

I initialize Swiper in a footer to be sure will be initialize after home is loaded even i do it with loop but still same issue

Any ideas how I can sort out this issue ?

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,
    });
});

Infinite scroll

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

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

UPDATE

I manage to make it work with next changes

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);
}

Answer 1

Look like destroy is called somewhere in the infinite scroll and Swiper must be re-initialize once loading is finished this will work for v2 infinite

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);
}