idangerous swiper выпуск с динамическим содержанием
я применяю плагин idangerous swiper scrollbar на контейнере, содержимое которого динамически загружается с помощью 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>
высота swiper-контейнера 100%
7 ответов
Я нашел решение, я добавил эту функцию, которую я называю после первой инициализации плагина
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.reInit();
}, 500);
}
это исправление было упомянуто в другом плагине, и когда я попробовал его с этим плагином swiper, он работал. Это имеет какое-то отношение к плагину, не знающему об изменении, которое произошло с DOM.
у меня есть решение no-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 3.x (я считаю, что вышеописанное охватывает 2.x)
function fixSwiperForIE(swiper) {
setTimeout(function () {
swiper.onResize();
});
}
обновлено для изменения в документации Swiper с тех пор .reInit больше не является функцией.
function reinitSwiper(swiper) {
setTimeout(function () {
swiper.update();
}, 500);
}
Я просто хотел добавить, что у меня также были проблемы с получением Swiper для работы с динамически загруженным контентом через ajax
. Это совершенно очевидно, потому что контент еще не был загружен, когда Swiper был внедрен. Я решил это, используя собственную функцию добавления 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
});
для адаптивного дизайна я вызываю следующий метод resizeFix
function reinitSwiper(swiper) {
swiper.resizeFix(true)
}