Проблема с опасным swiper с динамическим контентом
Я применяю плагин idangerous swiper для прокрутки контейнера, содержимое которого динамически загружается с помощью ajax, я инициализирую плагин после вызова ajax, проблема в том, что прокрутка не работает, пока я не изменю размер браузера. Я проверил его со статическим контентом, он работает нормально, нет необходимости изменять размер окна, но как только я переключаюсь на динамический контент, прокрутка не работает, пока я не изменяю размер браузера.
Вот как я инициализирую плагин
var mySwiper = new Swiper('.swiper-container', {
scrollContainer: true,
mousewheelControl: true,
mode: 'vertical',
scrollbar: {
container: '.swiper-scrollbar',
hide: true,
draggable: false
}
});
вот HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="searchList">
//here's the dynamic content being loaded (a list of div elements)
</div>
</div>
</div>
<div class="swiper-scrollbar">
</div>
</div>
высота контейнера-шпинделя составляет 100%
9 ответов
Я нашел решение, я добавил эту функцию, которую я вызываю после первой инициализации плагина
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.reInit();
}, 500);
}
Это исправление было упомянуто в другом плагине, и когда я попробовал его с этим плагином swiper, это сработало. Это связано с тем, что плагин не знает об изменениях, произошедших в DOM.
Обновлено для Изменения в документации Swiper, так как.reInit больше не является функцией.
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.update();
}, 500);
}
Мое исправление для Swiper 3.x (я полагаю, что вышеприведенные обложки 2.x)
function fixSwiperForIE(swiper) {
setTimeout(function () {
swiper.onResize();
});
}
У меня есть решение без JS.
HTML
<div class="responsive-swiper-holder">
<div class="responsive-swiper-shiv"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div><!-- .swiper-container -->
</div><!-- .responsive-swiper-holder -->
CSS
.responsive-swiper-holder {
position: relative;
}
.responsive-swiper-shiv {
padding-top: 31.25%;
}
.swiper-container {
position: absolute;
height: 100%;
width: 100%;
top: 0;
}
.swiper-wrapper, .swiper-slide {
height: 100%;
}
Следовательно, этот метод также будет работать для создания любого размера div в соответствии с тем, как это делает изображение. Масштабирование его высоты с фиксированным соотношением сторон по ширине.
Волшебство заключается в том, что браузеры обрабатывают значения margin/padding % как процент от ширины элемента, даже если вы дополняете верх или низ указанного элемента.
Надеюсь это поможет!
Я просто хотел добавить, что у меня также были проблемы с настройкой Swiper для работы с динамически загружаемым контентом через ajax, Это совершенно очевидно, потому что контент еще не был загружен, когда был запущен Swiper. Я решил эту проблему, используя собственную функцию добавления, а не собственную. Это было на версии 3.3.1, и это исправило это для меня без необходимости использовать setTimeout() или что-нибудь!
//quick and dirty creation of html to append
var imgHTML = "";
$.each(imgArray, function (i, url) {
imgHTML += '<div class="swiper-slide"><img src="' + url + '" alt=""/></div>';
});
//initiate swiper
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
loop: true,
autoHeight: true
});
mySwiper.appendSlide(imgHTML); //append the images
mySwiper.update(); //update swiper so it redoes the bindings
});
Я надеюсь, что это помогает некоторым нуждающимся людям!
swiper 3.4.2
HTML
<div class="swiper-container">
<div class="swiper-wrapper" style="height: auto">
<div class="swiper-slide"><img src="" width="100%"></div>
<div class="swiper-slide"><img src="" width="100%"></div>
<div class="swiper-slide"><img src="" width="100%"></div>
<div class="swiper-slide"><img src="" width="100%"></div>
<div class="swiper-slide"><img src="" width="100%"></div>
</div>
<div class="swiper-pagination"></div>
</div>
CSS
.swiper-container {
width: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
text-align: center;
line-height: 10px;
font-size: 12px;
color:#000;
opacity: 1;
background: rgba(255, 255, 255, 0.2);
}
.swiper-pagination-bullet-active {
color:#fff;
background: #000000;
}
Javascript
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
slidesPerView: 1,
spaceBetween: 0,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: true,
autoHeight: true
});
Если у вас есть изображения, которые динамически меняются на слайдах swiperjs, используйте observer: true в объекте конфигурации.
this.config = {
zoom: false,
slidesPerView: slidesPerView,
initialSlide: 12,
centeredSlides: true,
spaceBetween: 8,
scrollbar: false,
navigation: false,
pagination: false,
watchOverflow: true,
mousewheel: true,
observer: true, // <--------------------------add this
};
По документации:observer: true - Установите значение true, чтобы включить Mutation Observer в Swiper и его элементах. В этом случае Swiper будет обновляться (повторно инициализироваться) каждый раз, если вы измените его стиль (например, скрыть / показать) или изменить его дочерние элементы (например, добавить / удалить слайды) https://swiperjs.com/api/
Я столкнулся с той же проблемой, и я попробовал несколько решений, у меня есть доступ к экземпляру swipper, который я использовал «обновление ()», но это не сработало в моем случае использования, я не пробовал «наблюдатель: правда» config, но я закончил использовать другой подход перед инициализацией презентационного компонента, который у меня есть, я добавляю к отцовскому компоненту тег «ng-container», чтобы подтвердить, что компонент не отображает, пока информация не будет доступна примерно так:
<ng-container *ngIf="data?.items" >
<carousel-component [items]="data?.items"></table-component>
</ng-container>
Таким образом, я гарантирую, что собираюсь инициировать компонент, как только я полностью уверен, что данные доступны, затем я визуализирую компонент таким образом, что вы не работаете с проблемой динамического контента, не распознаваемого каруселью ,.
Хотя этот подход работает в моем случае использования, потому что я просто загружаю информацию один раз, я предлагаю, если в вашем случае это изменение изображений в определенный промежуток времени, чтобы использовать опцию «наблюдатель: правда», это может показаться очевидным, мое решение, но есть много новичков в angular, которые не знают о таком решении, надеюсь, что это поможет кому-то, как это помогло мне!.
Для адаптивного дизайна я вызываю следующий метод resizeFix
function reinitSwiper(swiper) {
swiper.resizeFix(true)
}