滑块只是在第一页（jQM）上工作，但在第二页，第三页和第二页上都失败了
各位大家好 ，我在JQM多页文档上遇到Swiper问题。
我在JQM项目中通过http://www.idangero.us/sliders/swiper/使用Swiper。
我可以在我的Multipage JQM文档结构的第一页上显示幻灯片并正常工作。 但是，当我尝试将滑块放到第一页以外的其他JQM页面时，幻灯片“将加载和显示”但“工作不正常”。
无法正常工作的说明：加载错误将导致整个滑块的宽度不正确，内容/列表未完全加载并且滑动手势无法正常工作，因为当向左/向右滑动时，它应停在每张幻灯片上。
请帮忙，谢谢。
以下两个示例，首先我在JQM文档的第一页上加载Swiper，它的工作原理如下：
这是工作滑块的JSfiddle [第一页] ： http ： //jsfiddle.net/h73k2/11/
Your New Application Page One
Page Footer
Page Two
I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.
Page Footer
JSFiddle for Not-Working Slider [第二页]： http ： //jsfiddle.net/jgYGJ/8/
将Swiper DIV移至第二页后， 未在下一页上进行操作：
Your New Application Page One
I'm first in the source order so I'm shown as the page.
View internal page called Page Two
Page Footer
Page Two
I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.
Page Footer
JS启动swiper：
$(function(){ //Featured Slide var featuredSwiper = $('.featured').swiper({ slidesPerView:'auto', centeredSlides: true, initialSlide:7, tdFlow: { rotate : 30, stretch :10, depth: 150 } }) //Thumbs $('.thumbs-cotnainer').each(function(){ $(this).swiper({ slidesPerView:'auto', offsetPxBefore:25, offsetPxAfter:10, calculateHeight: true }) }) //Banners $('.banners-container').each(function(){ $(this).swiper({ slidesPerView:'auto', offsetPxBefore:25, offsetPxAfter:10 }) }) })
代码更新：
Your New Application <!-- --> $(document).on("pagecontainerbeforehide", function (e, ui) { var activeP = ui.nextPage; var activeID = ui.nextPage[0].id; if (activeID == "page2" && $(".swiper-container", activeP).length === 0) { $("body .swiper-container") .removeClass("swiper-hidden") .prependTo($(".ui-content", activeP)); } }); Page One
I'm first in the source order so I'm shown as the page.
View Slider on Page Two
Page Footer
Page Two
I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.
Page Footer
您需要在pagecontainershow事件上初始化“swiper”。 此事件无法绑定到特定页面，因此您需要检索活动页面的ID并将其与包含“swiper”的页面的id进行比较。
将下面的代码放在head ，不要将它包装在$(function () {}); 。
$(document).on("pagecontainershow", function () { $.mobile.pageContainer.pagecontainer("getActivePage").find('.featured').swiper({ slidesPerView: 'auto', centeredSlides: true, initialSlide: 7, tdFlow: { rotate: 30, stretch: 10, depth: 150 } }); });
演示
检索活动页面的ID
$(document).on("pagecontainershow", function () { /* page's object */ var active = $.mobile.pageContainer.pagecontainer("getActivePage"); /* page's id */ var activePage = $.mobile.pageContainer.pagecontainer("getActivePage")[0].id; if( activePage == "targetPageID") { $(".featured", active).swiper({ slidesPerView: 'auto', centeredSlides: true, initialSlide: 7, tdFlow: { rotate: 30, stretch: 10, depth: 150 } }); } });
演示