swiper js 幻灯片在显示 Bootstrap 5 模态弹出窗口后消失

Question

我正在尝试在同一页面上使用 SwiperJS 和 Bootstrap 5 的弹出模式。当我单击幻灯片内的按钮时，它会打开弹出模式并根据滑块显示内容（幻灯片包含不同的糕点菜单选项）

但是不知何故，当我单击

.btn-view-gallery

按钮时，最左边的幻灯片随着模式的出现而消失..这是为什么？我该如何解决这个问题？

这是代码：

HTML

<div class="swiper menu-list-container">
  <div class="swiper-wrapper">
    <!-- item #1 -->
    <div class="swiper-slide">
      <img
        src="img/menu/bluder/000.png"
        class="card-img-top"
        alt="Kue Bluder"
      />
      <div class="slide-content">
        <h3 class="my-title">Kue Bluder</h3>
        <p class="my-description">
          Jelajahi dunia rasa dengan bluder <span class="fw-bold">Food Happy Tummy</span>, kualitas premium, varian lengkap.
        </p>
        <button type="button" class="btn btn-warning btn-view-gallery" role="button" 
        data-menu-name="bluder"
        data-bs-toggle="modal" data-bs-target="#modalMenu">Gallery Kue Bluder</button>    
      </div>
    </div>
    <div class="swiper-slide">
      <!-- content about item #2 -->
    </div>
    <div class="swiper-slide">
      <!-- content about item #3 -->
    </div>
    <div class="swiper-slide">
      <!-- content about item #4 -->
    </div>
    <div class="swiper-slide">
      <!-- content about item #5 -->
    </div>
  </div>
  <div class="swiper-pagination"></div>
</div>

<!-- Modal -->
<div class="modal fade" id="modalMenu" tabindex="-1" aria-labelledby="modalMenuLabel" aria-hidden="true">
  <div class="modal-dialog">

    <div class="modal-content" data-menu-name="bluder">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="modalMenuBluderLabel">Kue Bluder</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>

  </div>
</div>

CSS

.swiper {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
    position: relative;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
  }

  .slide-content {
    position: absolute;
    bottom: 0;
    background: linear-gradient(
      to top,
      rgb(238, 238, 238) 0%,
      rgba(238, 238, 238, 0.7) 50%,
      transparent 100%
    );
    width: 100%;
    padding: 0 1.2rem 1.2rem 1.2rem;
  }

JS

var swiper = new Swiper(".menu-list-container", {
  effect: "coverflow",
  loop: true,
  grabCursor: true,
  centeredSlides: true,
  slidesPerView: "auto",
  coverflowEffect: {
    rotate: 50,
    stretch: 0,
    depth: 100,
    modifier: 1,
    slideShadows: true,
  },
  pagination: {
    el: ".swiper-pagination",
  },
});

我尝试将示例放入 jsfiddle 和代码片段中，但它不会显示与我在浏览器中相同的结果，因此我上传了显示结果的屏幕截图。我希望它被允许。

原始情况屏幕截图显示5张幻灯片。

点击模态按钮后截图仅显示4张幻灯片。

任何帮助表示赞赏..

Answer 1

它可能是在引导模式中处理滚动条的方式。他们假设页面需要有侧边填充，以解决当模式打开且页面固定时滚动条消失的情况。因此，这会导致页面宽度稍微减小，刚好足以让其中一个图像进入下一行。

尝试添加这个：

body.modal-open {
  overflow: scroll !important;
  // or
  // overflow: hidden !important;
  padding-right: 0 !important;
}