除非重新调整页面大小,否则Swiper滑块无法工作

我试图将Swiper插件添加到我的一个页面.我想要实现的是整合将carousal滑块放在这里http://idangero.us/swiper/demos/05-slides-per-view.html

HTML

 

    

    
Slide 1
    
Slide 2
    
Slide 3
    
Slide 4
    
Slide 5
    
Slide 6
    
Slide 7
    
Slide 8
    
Slide 9
    
Slide 10
    

    

    

JS

var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 3,
        paginationClickable: true,
        spaceBetween: 30,
        // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    });

当我把它添加到小提琴它工作,但当我添加到我的HTML页面,swiper无法工作,直到我打开firebug或调整页面大小(http://vidznet.com/ng1/swiper/swipe.html)我不确定如果初始化时发生冲突,因为控制台中没有错误.

花了一些时间后,我认为它可能是一个jquery问题,并将编码包装在一个

pagebeforecreate

 $(document).on( "pagebeforecreate", "#new_",function( event ) { 

但仍然是一样的,

我还添加了以下代码

swiper.updateContainerSize();

这应该更新容器大小,但仍然无法正常工作.

任何帮助都感激不尽.