2017-01-13 11 views
1

「ギャラリーを表示」リンクをクリックした後、スワイパー・ギャラリーを表示します。 しかし、隠されたdivの内部で初期化された場合、Swiperは正しく動作していないようです。ここで iDangero.us div内でスワイパーが動作しない隠しディスプレイ:なし

は私のページです:

<div> 
<a href=“javascript:;” onclick=“toggle_visibility('gallery');”><img src=“img.jpg” alt=“Click to open the gallery”></a> 
</div> 

<div id=“gallery” style:“display:none”> 
<!— Swiper —> 
<div id=“slide-event” class=“swiper-container swiper-container-event”> 
<div class=“swiper-wrapper”> 
… 
</div> 
<!— Add Arrows —> 
<div id=“show-hide” class=“swiper-button-next”></div> 
<div id=“show-hide” class=“swiper-button-prev”></div> 
</div> 
<!— End Swiper —> 
</div> 

<script src="js/swiper.jquery.js"></script> 

この回避策は私のために動作しません:

function reinitSwiper(swiper) { 
    setTimeout(function() { 
    swiper.reInit(); 
    }, 500); 
} 

たぶん他のJavaScriptのトリックがありますか?なにか提案を?

+0

私はこのような何かを試してみた: $( 'A')の上( 'クリック'、関数reinitSwiper(swiper){ のsetTimeout(関数(){ swiper。 .reInit(); }、500); }); 動作しません。 –

+0

これはこれより簡単です。 Swiperの初期化に「observer:true、observeParents:true」を追加するだけです。 –

+0

フレデリック・デラワールが言ったように、それは私のために働く。ありがとうございました。 –

答えて

1

試して呼び出すためのあなたはスライダー

4

を表示したときに、私はこれらのリスナーが分かった

swiper.update(); 

方法:

observer: true 

オブザーバーSwiperの突然変異オブザーバーを有効にするにはtrueに セットし、その要素。この場合、Swiperは(再初期化)します(表示/非表示のように)そのスタイルを変更したり(スライドを追加/削除など)その子要素あなたも場合は、trueに設定

observeParents: true 

observeParents を変更した場合たびに更新されますswiperの親要素のための変異を監視する必要があり

関連する問題