Инициализировать слайдер после загрузки jQuery

Я использую слайдер jQuery (Swiper) в своем проекте. Инициализация ползунка работает нормально, если я загружаю страницу, но при загрузке нового контента (с ползунком) из html-файлов ползунок не инициализируется. Текущие шаги:

Создание нового раздела:

var section = $('<section class="cd-section overflow-hidden '+newSection+'"></section>').appendTo(mainContent);

Загрузка содержимого из html-файла в новый раздел

section.load(newSection+'.html .cd-section > *', function(event){...});

Я пытаюсь инициализировать после этого события загрузки, это не работает.

section.load(newSection+'.html .cd-section > *', function(event){

    if(typeof Swiper == "undefined") {
        console.log("Ready to rumble");
        $.getScript('js/swiper.jquery.min.js', function() {
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationType: 'progress',
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                slidesPerView: 'auto',
                centeredSlides: true,
                spaceBetween: 30,
                grabCursor: true,
            });
        });
    }
});

Как я могу заставить ползунок инициализироваться после события загрузки?


person Jan    schedule 27.01.2016    source источник


Ответы (1)


Я решил эту проблему, используя следующее:

  • Страница индекса должна иметь стиль swiper в голове.
  • Вызовите slidername.update(true) после события загрузки, чтобы обновить ползунок после манипуляции с DOM.

Подробнее о функции обновления см. на http://www.idangero.us/swiper/api. .

person Jan    schedule 06.02.2016