javascript - Swiper slider - Vertical slider not moving after last slide

Question

What is going on here is I want to add a slider HTML with extra HTML beneath the main slider.

What is the problem?

Things are working fine because we have a mouse scroll on the desktop. As soon as you see the output on mobile device things work differently because now touch comes in the picture. after the 4th slider, you can't move the slider. but I have still content left on the page after the fourth slide.

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

What I want is after the slider complete. I can move things normally the same as we scroll down the normal HTML.

Right now in the mobile output, you can't move the slider after the 4th slider I think it's stuck because of slider enable so you can't see content till the footer.

标签： javascripthtmljqueryswiperswiperjs