Swist with Thumbnails in Bootstrap Modal

Question

我試圖用縮略圖將swiper庫添加到bootstrap模態中，但是在模態中它不工作，爲什麼？ （我使用的代碼直接從文檔滑塊）

這裏是演示：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的後Bootstrap模態函數。

$(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); 
    }); 
});