如何在移动设备上的Bootstrap 4折叠中修复图像轮播？

Question

我在引导程序可折叠部分设置了Swiper Carousel图像。 我的问题是在Mobile上扩展手风琴时，响应速度变得混乱了-我在想，也许是因为它无法在扩展前计算隐藏部分的高度。

什么是解决方案？

这是我的崩溃：

<!-- Row Data -->
<div class="container">  
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
       ...
      </div>
    </div>
  </div>
</div>

<!-- Collapse Content -->
<tr>
  <td colspan="8" class="row-listings">
    <div class="container panel-collapse collapse in">
      .....
    </div>
  </td>
</tr>

滑动和折叠脚本：

jQuery('.collapse').on('show.bs.collapse', function () {
    jQuery('.collapse.in').collapse('hide');
});

var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
        observer: true,
observeParents: true,
      },
    });