jquery mobile с проблемами динамического содержимого dangero.us swiper

Я работаю над мобильным веб-приложением jquery. Я пробовал интегрировать dangero.us swiper. Я заполняю свой swiper-контейнер динамическим HTML. Я пробовал использовать функцию reinit () после вставки html, как описано в других задачах, но ничего не произошло.

это мой HTML:

  <div data-role="page" id="slider">
     .....
     <div class="swiper-container">

        <div class="swiper-wrapper">  <!-- wrapper -->


             <div id="slidecontent"></div>  <!-- dyn. html here -->


        </div>  <!-- wrapper -->

 </div>

это мой код для заполнения динамического контента, инициализировать swiper-instance вызовом reinit () - function

$('#slider').on('pageinit', function(event) {

  $('#slidecontent').load('slider_input.html').trigger("create");

  // div containers loading

});


   $(document).on('pageshow', '#slider', function(){ 

 var myapp2goSwiper = $('.swiper-container').swiper({
     pagination: '.pagination',
     paginationClickable: true,
     slidesPerView: 1,
     loop: true,
      onSlideClick : function(swiper) {
      //Do something when you touch the slide

      var i = myapp2goSwiper.clickedSlideIndex;

      var a = myapp2goSwiper.activeSlide();

      console.log(i);

      console.log(a);

      }


 }); 

 //myapp2goSwiper.reInit();
 reinitSwiper(myapp2goSwiper);

});


function reinitSwiper(swiper) {
setTimeout(function () {
    swiper.reInit();
}, 500);

};

В моем браузере ничего не отображается. Что я могу сделать, чтобы обновить или повторно загрузить свой html-контент, чтобы экземпляр swiper работал правильно? Живая демонстрация находится по адресу http://www.m.myapp2go.de/myapp2go-slide.html

Я решил свою проблему. Добавлять мой html-контент в <div id="slidecontent"></div> было неправильно. Мне нужно напрямую добавить html-контент в <div class="swiper-wrapper">.

Сейчас работает, но:

  • пагинация больше не отображается
  • onSlideClick больше не срабатывает

Какие-либо предложения?


mobile dynamic jquery swiper
person Ralf Bordé    schedule 21.09.2013    source источник
comment
Я заметил, что ваше приложение теперь работает, расскажите, пожалуйста, что вы сделали? Большое спасибо!   -  person Simona Adriani    schedule 23.05.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я попытался вызвать метод createpagination в js-файле swiper, чтобы обновить разбиение на страницы в функции reinit следующим образом, и это сработало.

Перейдите к строке 741 в уменьшенном файле js версии 2.1. Будет метод переустановки, как написано ниже. Этот метод необходимо вызвать для повторной инициализации swiper в случае, если он создается динамически. Я вызвал метод createPagination () в reinit, чтобы обновить разбиение на страницы следующим образом. Метод reinit по умолчанию вызывает только метод init, поэтому разбиение на страницы не выполняется. не обновляюсь.

a.reInit = function(b) {
   a.init(!0, b);
   a.createPagination();
};

Надеюсь, это поможет!!!

person Silver    schedule 10.05.2014
comment
Не могли бы вы уточнить, что вы сделали? Это проблема, с которой я столкнулся, и я могу решить ее! Пожалуйста, разместите код или лучшее описание .. спасибо! - person Simona Adriani; 23.05.2014
comment
@SimonaAdriani: отредактировал мой комментарий. Проверь, помогает ли !! Вернитесь назад, если вам понадобятся дополнительные разъяснения, напишите мне через мой идентификатор в профиле. - person Silver; 05.06.2014