无限滚动加载更多信息后，Swiper 滑块不起作用

Question

我正在使用 Swiper slider for some images on homepage with infinite scroll 加载有关 Opencart 平台滚动的更多信息。

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

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

更新

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

刷卡器

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 event callback。这可能看起来像这样：

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

Answer 2

看起来在无限滚动的某处调用了 destroy，加载完成后必须重新初始化 Swiper 这将适用于 v2 infinite

刷机

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

无限滚动加载更多信息后，Swiper 滑块不起作用

Swiper slider do not work after infinite scroll load more information

javascript

jquery

swipe

opencart

infinite-scroll