ブートストラップモードのサムネイルを含むスワイパー

Question

サムネイルを含むスワイパーライブラリーをブートストラップモーダルに追加しようとしましたが、モーダルでは機能しません。なぜですか？ （私は、ドキュメントから直接、スライダーのコードを使用）

ここではデモです：http://codepen.io/vertisan/pen/MyBdKz

モーダル：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog modal-lg" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 

     <div class="swiper-container gallery-top"> 
      <div class="swiper-wrapper"> 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div> 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div> 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div> 
      </div> 
     </div> 
     <div class="swiper-container gallery-thumbs"> 
      <div class="swiper-wrapper"> 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/400/400/nature/1)"></div> 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/400/400/nature/2)"></div> 
      <div class="swiper-slide" style="background-image:url(http://lorempixel.com/400/400/nature/3)"></div> 
      </div> 
     </div> 

     </div> 
    </div> 
    </div> 
</div> 

JS：

var galleryTop = new Swiper('.gallery-top', { 
    spaceBetween: 10, 
}); 
var galleryThumbs = new Swiper('.gallery-thumbs', { 
    spaceBetween: 10, 
    centeredSlides: true, 
    slidesPerView: 'auto', 
    touchRatio: 0.2, 
    slideToClickedSlide: true 
}); 
galleryTop.params.control = galleryThumbs; 
galleryThumbs.params.control = galleryTop; 

Answer 1

後のsetTimeoutを置くことが必要ですブートストラップモーダル関数。

$(document).ready(function(){ 
    $(".modal").on('show.bs.modal', function() { 
     setTimeout(function() { 
      var swiper3 = new Swiper('.swiper-container', { 
       pagination: '.swiper-pagination', 
       nextButton: '.swiper-button-next', 
       prevButton: '.swiper-button-prev', 
       slidesPerView: 1, 
       spaceBetween: 30, 
       loop: true, 
       effect: 'fade' 
      }); 
     }, 500); 
    }); 
});