防止 SwiperJS 滑过最后一张幻灯片

Question

更新信息：

我注意到 swiper-wrapper 的宽度为 4816 像素，四张幻灯片中的每一张的宽度均为 1174 像素：

<div class="swiper-wrapper" style="width: 4816px; transform: translate3d(0px, 0px, 0px);">
  <div class="swiper-slide swiper-slide-visible swiper-slide-active" style="width: 1174px; margin-right: 30px;">
    <div class="card-content">
      <div class="card-header">
       <span>Heading</span>
      </div>

我已经研究了几个小时，但我正在努力弄清楚如何防止 swiper 滚动到最后一张幻灯片之外。 swiper 设置了四个幻灯片，它们都具有固定宽度（无响应）。当视口宽度小于 swiper 容器的宽度时，SwiperJS 被激活。但是，它允许用户滑动到最后一张（最右边）幻灯片之外。

JavaScript

    const swiper = new Swiper('.swiper-container', {
        observer: true, 
        observeParents: true,
        spaceBetween: 30,
        allowSlideNext: false,
        freeMode: true,
        resistanceRatio: 0,
        watchSlidesVisibility: true,
        watchSlidesProgress: true,

        breakpoints: {
            1200: {
                allowSlideNext: true,
                resistanceRatio: 0,
            },
        },
    });

HTML swiper 标记是典型的：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            Slider 1
        </div>
        <div class="swiper-slide">
            Slider 2
        </div>
        <div class="swiper-slide">
            Slider 3
        </div>
        <div class="swiper-slide">
            Slider 4
        </div>
    </div>
</div>

CSS

.swiper-container {
    max-width: 1220px !important;
}

.swiper-container-product-cards {
    margin: 0 auto;
    max-width: 1250px;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0 5px;
    z-index: 1;
}

.swiper-slide {
    text-align: center;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0;
    border-radius: 0;
    height: 578px;
    width: 287px !important;
    justify-content: space-around;
}