<section>
  <div class="container">
  <div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>
      <div class="swiper-slide">Slide 11</div>
      <div class="swiper-slide" style="background: red;">Slide 12</div>
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
</section>

body {
  background-color: #ddd;

  height: 400vh;
}

section {
  margin-top: 500px;
    overflow: auto;
  overflow-x: hidden;
}

.swiper {
  aspect-ratio:4/1;
  width: calc(50% + 50vw);
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex !important;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.container {
  width: max(70%, 900px);
  padding: 0 20px;
  margin: 0 auto;
}

const swiper = new Swiper(".swiper", {
  // Optional parameters
  slidesPerView: 4,
  spaceBetween: 30,loop: true,
  // Navigation arrows
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
mousewheel: {
 releaseOnEdges: true,
  eventsTarget: "container",
}
});

// let y = 0
// window.addEventListener("scroll", function (e) {
//   if (window.scrollY){
//    swiper.slideNext();
//   }else {
//     swiper.slidePrev()
//   }
// })


//https://stackoverflow.com/questions/74371189/swiper-js-start-autoplay-slider-only-when-user-scrolls-to-slider-view