Estou tentando adicionar oSwiper plugin para uma das minhas páginas. O que estou tentando alcançar é integrar, obtenha o controle deslizante de carrossel aquihttp://idangero.us/swiper/demos/05-slides-per-view.html

HTML

 <div class="swiper-container">
    <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
    </div>

    <div class="swiper-pagination"></div>
    </div>

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',
    });

Quando o adiciono a um violino, ele funciona, mas quando adiciono à minha página html, o swiper não funciona até abrir o firebug ou redimensionar a página (http://vidznet.com/ng1/swiper/swipe.html) Não tenho certeza se está em conflito ao inicializar porque não há erros no console.

Depois de passar algum tempo, pensei que poderia ser um problema de jquery e envolvi a codificação dentro de um

pagebeforecreate

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

mas ainda assim,

Eu também adicionei o código abaixo

swiper.updateContainerSize();

que deveria atualizar o tamanho do contêiner, mas ainda não está funcionando.

Qualquer ajuda será muito apreciada.