Bootstrap Modal 中帶有縮略圖的 Swiper

Question

我試圖將帶有縮略圖的 swiper 庫添加到引導模式，但在模式中它不起作用，為什么？ （我直接從文檔中使用了滑塊的代碼）

這是演示： 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);
    });
});

Answer 2

將此 CSS 添加到樣式表中：

.modal.fade {
display: block !important;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease 0s;}

.modal.fade.show {
display: block !important;
opacity: 1;
visibility: visible;
transition: all 0.3s ease 0s;}