ページがリサイズされない限りスワイパースライダーは機能しません

Question

私のページの1つにSwiperプラグインを追加しようとしています。何イム達成しようとすると、ここにhttp://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', 
    }); 

私はそれが動作フィドルに追加するが、とき上カルーセルスライダーを取得し統合することです私は自分のhtmlページに追加します。スワイパーは、火かき棒を開けるか、ページのサイズを変更するまで動作しません（http://vidznet.com/ng1/swiper/swipe.html）コンソールにエラーはありません。

は、いくつかの時間を過ごした後、私はそれがjQueryの問題かもしれないと思ったし、私も追加

pagebeforecreateまだ

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

が、同じ内部コーディングを、ラップ以下のコード

swiper.updateContainerSize(); 

これはコンテナのサイズを更新する予定ですが、まだ動作していません。

ご協力いただければ幸いです。

Answer 1

あなたは試みることができる：

$(window).on({ 
    load: function(){ 
     $(this).trigger('resize'); 
    } 
    }); 

それはstickytapeソリューションのビットですけれども。

Answer 2

使用このコード：？

swiper.update();