Нужно обновить страницу при использовании iDangero.us Swiper с jQuery Mobile

Question

Я сейчас пытаюсь добавить iDangerous Swiper на страницу, созданную с помощью jQuery Mobile, но для отображения swiper мне нужно перезагрузить страницу. Я видел несколько случаев, когда у людей были некоторые проблемы с ними, но их решения не работают для моей проблемы ниже.

Я пробовал несколько разных вещей: pagehow, pageinit, pagebeforeshow, mobileinit. Также триггер («создать»), триггер («обновить») и попытался добавить скрипт до или после jQuery Mobile js.

Я в настоящее время использую jQuery Mobile 1.4.1 alpha 2 и Swiper 2.1.0.

Мой вопрос: что было бы правильной последовательностью для сценариев, чтобы заставить его работать, и какое из событий на этой странице должно сделать трюк? Спасибо за ваше время.

Мой HTML для Swiper идет следующим образом:

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

     <div class="swiper-slide"> 
<div class="picture"><img src="image1.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " id="productImage" /></div> 
     </div> 
<div class="swiper-slide"><div class="picture"> 
     <img src="image2.jpj" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " /> 
     </div></div> 
<div class="swiper-slide"><div class="picture"> 
     <img src="image3.jpg" alt="Women's L-Premise Jacket" title=" Women's L-Premise Jacket " /> 
     </div></div> 
     </div> 
    </div> 

Мои JQuery и JQuery Mobile файлы загружаются в нижней части страницы.

<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.min.js"></script> 
<script> 
    $(document).on('pagecreate', function(){ 
     $("#leftPanel").trigger("updatelayout"); 

     $.mobile.defaultDialogTransition = 'slide'; 
     $.mobile.defaultPageTransition = 'slide'; 
     $.mobile.selectmenu.prototype.options.nativeMenu = false; 

    }); 
</script> 

<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/idangerous.swiper-2.1.min.js"></script> 


<script type="text/javascript" src="includes/templates/YOUR_TEMPLATE_mobile/jscript/jquery.mobile-1.4.0-alpha.2.min.js"></script> 

<script src="/4.0/includes/templates/YOUR_TEMPLATE_mobile/jscript/boilerplate/helper.js"></script> 
<script> 
$('#productinfo').on('pageshow', function() { 
    var mySwiper = new Swiper('.swiper-container',{ 
    centeredSlides: true, 
    slidesPerView: 2, 
    watchActiveIndex: true 
    }); 
}); 
</script> 

Answer 1

Вы можете попробовать это:

$('#productinfo').live('pageinit',function(event){ 
    swiper function... 
}); 

Answer 2

я наткнулся на решение этой проблемы, пытаясь решить что-то другое. Сайт, который я создавал, генерируется с использованием php. Html уже был встроен, поэтому все информационные страницы продукта имели одинаковый идентификатор #product_info, а div, в котором содержался swiper, всегда имел идентификатор #product_image. При добавлении функции PHP в #product_image ид, например:

#product_image<?php echo $product_id; ?> 

и давая Swiper такой же, как в

var mySwiper = new Swiper('#product_image<?php echo $product_id; ?>',{ 

Я был в состоянии устранить необходимость перезагрузки страницы. Надежда помогает кому-то.