Javascript 无限滚动加载更多信息后Swiper滑块不工作

我正在使用主页上的一些图像来加载Opencart平台上滚动的更多信息

当我向下滚动时，问题来了，无限滚动加载的内容比滑动箭头不适用于新内容的内容多

我在页脚中初始化Swiper，以确保在home加载后将被初始化，即使我使用循环进行初始化，但仍然存在相同的问题

有没有办法解决这个问题

游泳运动员

$(".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,
    });
});

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

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 ....",
     }
 },

更新

我设法使它与下一个变化一起工作

游泳运动员

$(".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,
    });
});

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

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

$("#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);
}

---

Swiper在以下位置有一个

更新
方法：

您需要在无限滚动事件中运行它。可能是这样的：

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

看起来在无限卷轴的某个地方调用了destroy，一旦加载完成，Swiper必须重新初始化，这将适用于v2 infinite

游泳运动员

$(".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,
    });
});

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

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

$("#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);
}

不确定是否正确，但当我在初始化后读取infinite scroll v2时，我应该调用函数（项）{var mysweer=document.querySelector（'.swiper container'）.swiper mysweer.update（）；}，但仍然不起作用我已经更新了答案。您所显示的似乎不是事件回调。我尝试了新的更新，但仍然无法工作，即使我在$container.on中使用console.log（'fine'）。。。。如果没有在控制台中显示，则需要查看完整的演示以进一步提供帮助。我在暗中猜测，不然。你可以尝试在一个JavaScript游乐场网站上设置它。我很高兴你花时间来帮助我你的帖子看起来不错，但对我来说不起作用（看起来Destry在无限卷轴中的某个地方被称为Destrory）。无论如何，如果有人需要，我会投票，我会用“为我工作”的方式更新我的主题。谢谢你让它工作，但是你需要把你的答案放在一个答案中（并接受它），这样这个帖子就可以解决了。