jquery mobile下正确地初始化swiper

Question

我遇到奇怪的问题：
当我在jquery mobile下使用如下的方式初始化时

$(document).on('pagebeforecreate', '#index-page', function(){
        var moreProductSwiper = new Swiper('#more-product-block', {
        direction: 'horizontal',
        loop: true,
        slidesPerView: 'auto',
        loopedSlides: 4,
        autoHeight: true,
        autoplay: 2000,
        pagination: '.swiper-pagination'
    });

无奈地发现，产生的轮播图时而正常运行，时而不行，无规律可言，无法排查错误。后来参考 http://stackoverflow.com/questions/16496078/swiper-not-working-in-jquery-mobile 后得知，swiper只有在已知宽高的情况下才能正常正常，而jquery mobile只有pageshow事件才能确保宽高。所以修改如下：

$(document).on('pageshow', '#index-page', function(){
        var moreProductSwiper = new Swiper('#more-product-block', {
        direction: 'horizontal',
        loop: true,
        slidesPerView: 'auto',
        loopedSlides: 4,
        autoHeight: true,
        autoplay: 2000,
        pagination: '.swiper-pagination'
    });

先贴出结论帮助同样问题的人，更深入原因，待研究。

Answer 1

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
                             observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swipe
});

作者： https://segmentfault.com/a/1190000002962202