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

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

06.11.2019 06:07:38 Просмотров 135 Источник

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

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

Я инициализирую 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);
}
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/58733125/swiper-slider-do-not-work-after-infinite-scroll-load-more-information#comment103792763_58733125
Рад, что вы получили его работу, но вам нужно поместить свой ответ в ответ (и принять его), чтобы этот пост можно было решить.

Ответы - Слайдер Swiper не работает после бесконечной загрузки прокрутки дополнительная информация / Swiper slider do not work after infinite scroll load more information

isherwood

06.11.2019 06:13:51

Swiper имеет update

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

swiper.update();
https://stackoverflow.com/questions/58733125/swiper-slider-do-not-work-after-infinite-scroll-load-more-information/58733257#comment103757617_58733257
не уверен, что я делаю это правильно, но как я читал в infinite scroll v2 после инициализации я должен вызвать функцию (item) { var mySwiper = document.querySelector('.подметалка-контейнер').mySwiper подметалка.update ();} но все еще не работает
https://stackoverflow.com/questions/58733125/swiper-slider-do-not-work-after-infinite-scroll-load-more-information/58733257#comment103757855_58733257
Я обновил ответ. То, что вы показали, не похоже на обратный вызов события.
https://stackoverflow.com/questions/58733125/swiper-slider-do-not-work-after-infinite-scroll-load-more-information/58733257#comment103758364_58733257
я попытался с новым обновлением, но все еще не работает, даже если я консоль.log ('fine') внутри контейнера$.на.... не отображается в консоли
https://stackoverflow.com/questions/58733125/swiper-slider-do-not-work-after-infinite-scroll-load-more-information/58733257#comment103758813_58733257
Мне нужно будет увидеть полную демонстрацию, чтобы помочь дальше. Я предполагаю, что в темноте иначе. Вы можете попробовать настроить его на одном из сайтов JavaScript playground.
https://stackoverflow.com/questions/58733125/swiper-slider-do-not-work-after-infinite-scroll-load-more-information/58733257#comment103786195_58733257
я рад, что вы тратите свое время, пытаясь помочь мне ваш пост выглядит правильно, но не работает для меня (похоже, destory называется где-то в бесконечном свитке) в любом случае я дам голос в случае, если кому-то это нужно, и я обновляю свою тему с тем, как работает для меня . спасибо
Является ответом!
Ivan

11.11.2019 10:08:30

Похоже, что gestroy вызывается где-то в бесконечной прокрутке, и 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);
}
Закрыть X