Preventing SwiperJS from swiping past the last slide

Viewed 1032

UPDATED INFO:

I noticed the swiper-wrapper has a width of 4816px and each of the four slides have widths of 1174px:

<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>

I've researched for hours, but am struggling with figuring out how to prevent the swiper from scrolling beyond the last slide. The swiper is set up with four slides that all have a fixed width (not responsive). When the viewport width is less than the width of the swiper container, the SwiperJS is activated. However, it allows the user to swipe far beyond the last (rightmost) slide.

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 The swiper markup is typical:

<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;
}
0 Answers
Related