Swiper 滑块 - 最后一张幻灯片后垂直滑块不移动

Question

这里发生的事情是我想在主滑块下方添加一个带有额外 HTML 的滑块 HTML。

有什么问题？

一切正常，因为我们在桌面上有一个鼠标滚动。一旦您在移动设备上看到输出，事情就会有所不同，因为现在触摸出现在画面中。在第 4 个滑块之后，您无法移动滑块。但我在第四张幻灯片后仍有内容留在页面上。

HTML

<section class="slider-part">
  <div class="swiper-container mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide bg-y">Slide 1</div>
      <div class="swiper-slide bg-r">Slide 2</div>
      <div class="swiper-slide bg-g">Slide 3</div>
      <div class="swiper-slide bg-v">Slide 4</div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</section>
<section class="content-part">
  <div class="container-xl">
    <div class="row">
      <div class="col-12 pt-5 pb-5">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, rerum sint pariatur natus mollitia nesciunt. Porro sit odit veniam eos quaerat animi sint ipsam aspernatur ut repellat tenetur quibusdam, corrupti optio cupiditate quis. Ipsa sapiente explicabo quam quibusdam facere, minus fugit modi impedit illo doloremque quisquam tempore corrupti quis mollitia.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 pt-5 pb-5">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, rerum sint pariatur natus mollitia nesciunt. Porro sit odit veniam eos quaerat animi sint ipsam aspernatur ut repellat tenetur quibusdam, corrupti optio cupiditate quis. Ipsa sapiente explicabo quam quibusdam facere, minus fugit modi impedit illo doloremque quisquam tempore corrupti quis mollitia.
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 pt-5 pb-5">
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, rerum sint pariatur natus mollitia nesciunt. Porro sit odit veniam eos quaerat animi sint ipsam aspernatur ut repellat tenetur quibusdam, corrupti optio cupiditate quis. Ipsa sapiente explicabo quam quibusdam facere, minus fugit modi impedit illo doloremque quisquam tempore corrupti quis mollitia.
        </p>
      </div>
    </div>
  </div>
</section>
<footer>
  <div class="container-xl">
    <div class="row">
      <div class="col-12">
        <h2>I am Footer</h2>
      </div>
    </div>
  </div>
</footer>

CSS

.mySwiper {
  height: 100vh;
}
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
.bg-y {
  background-color: #eccc68;
}
.bg-r {
  background-color: #ff7f50;
}
.bg-g {
  background-color: #a4b0be;
}
.bg-v {
  background-color: #70a1ff;
}

footer {
  background-color: #ffa502;
  padding: 20px 0;
}
footer h2 {
  color: #fff;
  text-align: center;
}

body {
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}
body::-webkit-scrollbar { 
    display: none;  
}

JS

var swiper = new Swiper(".mySwiper", {
  direction: "vertical",
  slidesPerView: 1,
  mousewheel: true,
  speed: 1000,
  // simulateTouch: false,
  keyboard: {
    enabled: true,
  },
  mousewheel: {
    releaseOnEdges: true,
    forceToAxis: true,
    sensitivity: 1,
  },
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  on: {
    slideChange: function () {
      setTimeout(function () {
        swiper.params.mousewheel.releaseOnEdges = false;
      }, 500);
    },
    reachEnd: function() {
      setTimeout(function () {
        swiper.params.mousewheel.releaseOnEdges = true;
      }, 750);
    }
  },
});

我想要的是滑块完成后。我可以像向下滚动普通 HTML 一样正常移动内容。

现在在移动输出中，您无法在第 4 个滑块之后移动滑块，我认为它被卡住了，因为启用了滑块，因此您在页脚之前看不到内容。