javascript - Swiper with thumbnails in Bootstrap Modal - Stack Overflow

admin管理员组

文章数量:1336311

I tried to add swiper library with thumbnails to bootstrap modal, but in modal it's not working, why? ( I used code for slider directly from docs )

Here is demo:

Modal:

<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()"></div>
            <div class="swiper-slide" style="background-image:url()"></div>
            <div class="swiper-slide" style="background-image:url()"></div>
          </div>
        </div>
        <div class="swiper-container gallery-thumbs">
          <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url()"></div>
            <div class="swiper-slide" style="background-image:url()"></div>
            <div class="swiper-slide" style="background-image:url()"></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;

I tried to add swiper library with thumbnails to bootstrap modal, but in modal it's not working, why? ( I used code for slider directly from docs )

Here is demo: http://codepen.io/vertisan/pen/MyBdKz

Modal:

<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./1200/1200/nature/1)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel./1200/1200/nature/2)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel./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./400/400/nature/1)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel./400/400/nature/2)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel./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;

• javascript
• jquery
• twitter-bootstrap

Share Improve this question Follow edited Apr 24, 2016 at 15:45 Igor Ivancha 3,45144 gold badges3232 silver badges3939 bronze badges asked Apr 24, 2016 at 14:54 DamianDamian 55533 gold badges1111 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

It is necessary to put the setTimeout after Bootstrap modal function.

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

Add this CSS into StyleSheet:

.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;}

本文标签： javascriptSwiper with thumbnails in Bootstrap ModalStack Overflow