Работа слайдера с bootstrap

[AlexanderLebedev]

Имеется слайдер, "//" если удалить эти строки , то все работает. Там collapse от bootstrap, скрыть и показать блок.

Скрытый текст

А когда всё на месте, с скрытием, то он показывает так

Скрытый текст

Помогите исправить, сложно найти рабочий подобный слайдер. Есть мнение что конфликтуют JS, но как их поставить чтоб всё норм было.

<!-- Наружная реклама -->
<div id="collapse_1" class="collapse" aria-labelledby="heading_1" data-parent="#accordionExample"> // ЭТА УДАЛИТЬ НАДО ЧТОБ РАБОТАЛО
  <div class="container header">
    <div class="row align-items-center">
      <div class="card-body card align-items-center bg-lightgrey">
        <h5>
          <img src="http://www.cyberforum.ru/images/header/nar.png" width="105" height="80">
          Наружное и внутреннее оформление
        </h5>
      </div>
    </div> 
  <!-- Слайдер -->
  <div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200">
          </div>
          <div class="swiper-slide">
            <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200">
          </div>
          <div class="swiper-slide">
            <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200">
          </div>
          <div class="swiper-slide">
            <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200">
          </div>
          <div class="swiper-slide">
            <img src="http://www.cyberforum.ru/images/header/logo.png" width="250" height="200">
          </div>
      </div>
        <div class="swiper-button-next"></div> 
        <div class="swiper-button-prev"></div>
  </div>
  <!-- Конец слайдера -->
 </div>
</div> // ЭТА УДАЛИТЬ ЧТОБ РАБОТАЛО НАДО
<!-- Конец наружной рекламы -->

СКРИПТЫ В КОНЦЕ BODY

<!-- Скрипты -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="js/slider.js"></script>
  <script type="text/javascript">
    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      loop: false,
      loopFillGroupWithBlank: false,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
    });
  </script>
  <script src="js/bootstrap.js"></script>
<!-- Конец скрипты -->

 

После уменьшении или увеличении страницы всё работает как надо. Что за логика ?

[AlexanderLebedev]

Проблема решена.

 

var swiper = new Swiper('.swiper-container', {
          slidesPerView: 3,
          spaceBetween: 30,
          loop: false,
          loopFillGroupWithBlank: false,
          observer: true,
          observeParents: true,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
          debugger: false
    });

 

          observer: true,
          observeParents: true,

Нужно было воткнуть