I’m trying to use SwiperJS and Bootstrap 5’s popup modal on the same page. When I click on the button inside a slide, it opens the popup modal and show the content according to the slider (the slides contain different pastries menu options)

but somehow when I click on the .btn-view-gallery button, the leftmost slide disappears as the modal appears.. why is that? and how do I fix that behavior?

[UPDATE]

when I check the developer tools, the .swiper element becomes affected with transform3d: (93px, 0, 0); when the modal popup appears.

this is the code:

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",
  },
});

I tried putting the example in jsfiddle and in the code snippet but it wouldn’t show the same result I’m having in my browser so I’m uploading a screenshot showing the results instead.. I hope it’s allowed.

original condition screenshot shows 5 slides.

after clicking the modal Button screenshot only shows 4 slides.

any help is appreciated..