Слайдер Swiper не работает после бесконечной загрузки прокрутки дополнительная информация
Я использую 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);
}

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







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