javascript - Bootstrap 模态中带有缩略图的滑动器

Question

我尝试将带有缩略图的滑动器库添加到 Bootstrap 模态，但在模态中它不起作用，为什么？(我直接从文档中使用 slider 代码)

这是演示: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);
    });
});