javascript - 无限滚动加载更多信息后，Swiper slider 不起作用

Question

我正在使用 Swiper slider对于主页上的一些图像 infinite scroll加载更多关于 Opencart 平台滚动的信息。

当我向下滚动并且无限滚动加载更多内容时，问题就来了，而不是 Swiper Slider 箭头不适用于新内容

我在页脚中初始化了 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,
    });
});

无限滚动

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

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

更新

我设法让它适应接下来的变化

滑动器

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 在 its API 中有一个 update 方法:

swiper.update();

您需要在无限滚动中运行它 load事件 callback .这可能看起来像这样:

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