Почему swiper так реагирует?

Question

kshkld7ck @kshkld7ck

JavaScript

Почему swiper так реагирует?

Вот ссылка
проблема такова, при нажатии на кнопку "Подробнее о компании" открывается модалка, и во вкладке с врачами стоит swiper. И когда он открывается - то будто не подгружается. Но проблема решается заходом в DevTools, и там все встает на свои места.

var swiper = new Swiper('.swiper-container', {
  slidesPerView:3,
 
   resistanceRatio: 0,
   spaceBetween:16,
   breakpoints: {
    // when window width is <= 320px
    320: {
      slidesPerView: 3,

    },
    // when window width is <= 480px
    480: {
      slidesPerView: 3,

    },
    640: {
      slidesPerView: 3,
    },
    // when window width is <= 640px
 
    1140: {
      slidesPerView: 3,
    }
  },
   scrollbar: {
     el: '.swiper-scrollbar',
     hide: false,
   },

 });

<div class="swiper-container">
        <div class="swiper-wrapper">
          <!-- START BLOCK : slide -->
          <div class="swiper-slide" data-toggle="modal" data-target="#doctor-modal">
            <div class="col-12">
              <div class="card" data-toggle="modal" data-target="#modalDoc{id}">
                <img class="card-img-top" src="images/avatar.png" alt="Аватар" width="220" height="220">
                <div class="card-body">
                  <span id="doctor_name">Иванов Иван Иванович</span><br>
                  <span id="doctor_position">Врач-терапевт</span>
                  <button id="doctor_info">
                    <img src="images/doctor_info.svg" alt="">
                  </button>
                </div>
              </div>
            </div>
          </div>
        
          <div class="swiper-slide">
            <div class="col-12">
              <div class="card" data-toggle="modal" data-target="#modalDoc{id}">
                <img class="card-img-top" src="images/avatar.png" alt="Аватар" width="220" height="220">
                <div class="card-body">
                  <span id="doctor_name">Иванов Иван Иванович</span><br>
                  <span id="doctor_position">Врач-терапевт</span>
                  <button id="doctor_info">
                    <img src="images/doctor_info.svg" alt="">
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="col-12">
              <div class="card" data-toggle="modal" data-target="#modalDoc{id}">
                <img class="card-img-top" src="images/avatar.png" alt="Аватар" width="220" height="220">
                <div class="card-body">
                  <span id="doctor_name">Иванов Иван Иванович</span><br>
                  <span id="doctor_position">Врач-терапевт</span>
                  <button id="doctor_info">
                    <img src="images/doctor_info.svg" alt="">
                  </button>
                </div>
              </div>
            </div>
          </div>
      
          <div class="swiper-slide">
            <div class="col-12">
              <div class="card" data-toggle="modal" data-target="#modalDoc{id}">
                <img class="card-img-top" src="images/avatar.png" alt="Аватар" width="220" height="220">
                <div class="card-body">
                  <span id="doctor_name">Иванов Иван Иванович</span><br>
                  <span id="doctor_position">Врач-терапевт</span>
                  <button id="doctor_info">
                    <img src="images/doctor_info.svg" alt="">
                  </button>
                </div>
              </div>
            </div>
          </div>
          <!-- END BLOCK : slide -->

        </div>
        <div class="swiper-scrollbar"></div>
      </div>