我在我的項目中使用了Swiper 9.3.2。 我希望swiper-slide在尚未到達showCase部分時具有400px的特定寬度，但是當用戶滾動并獲得showCase部分時，showCase - slider類將獲取整個頁面，swiper-slide將具有正確的寬度。帶走。

所有這些場景都工作正常，但它有一個缺點，當用戶在showCase部分滾動時，滑動條的寬度會不斷變化，從而產生不合適的用戶體驗。

你能指導我如何解決這個問題嗎？ 我的工作有什么問題？ 提前感謝您的指導。

// Swiper ShowCase
var swiperShowCase = new Swiper(".SwiperShowCase", {
  slidesPerView: 'auto',
  spaceBetween: 15,
  loop: true,

});
// Swiper ShowCase

const target = document.getElementById("showCase");
const widthSlide = document.querySelectorAll('.showCase--slider .swiper-slide');
for (let i = 0; i < widthSlide.length; i++) {
  widthSlide[i].setAttribute("style", "width:430px")
}

window.onscroll = function() {
  const scrollPosition =
    window.pageYOffset ||
    document.documentElement.scrollTop ||
    document.body.scrollTop ||
    0;
  if (scrollPosition >= target.offsetTop) {
    target.classList.add("active");
    swiperShowCase.params.slidesPerView = 3;
    swiperShowCase.update();

    const widthSlide = document.querySelectorAll('.showCase--slider .swiper-slide');
    for (let i = 0; i < widthSlide.length; i++) {
      widthSlide[i].setAttribute("style", "width: fit-content !important")
    }
  }

};

.sectionTop {
  height: 800px;
  width: 100%;
  border: 3px solid green;
  margin-bottom: 5rem;
}

.sectionBottom {
  height: 800px;
  width: 100%;
  border: 3px solid yello;
  margin-bottom: 5rem;
}

.showCase {
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.showCase--content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 1000px;
  border: 1px solid red;
}

.showCase--content::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  bottom: 0;
  left: 0;
  background-color: rgba(17, 17, 17, 0.1);
}

.showCase--content::before {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  bottom: 0;
  left: 50%;
  background-color: rgba(17, 17, 17, 0.1);
}

.showCase--content .title {
  width: 35%;
  margin-inline-start: 14px;
}

.showCase--slider {
  width: 50%;
  height: 100%;
  position: relative;
  color: black;
}

.showCase .showCase--slider .swiper {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0;
  margin-left: auto;
}

.showCase .swiper-slide {
  width: 400px !important;
  padding: 1.5rem;
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.7);
  border: 1px solid blue;
}

.showCase .swiper-slide>div {
  position: relative;
  overflow: hidden;
}

.showCase .swiper-slide>div>img.indicatorImage {
  height: 300px;
  width: 100%;
  object-fit: cover;
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: all 0.5s;
}

.showCase .swiper-slide>div:hover img.indicatorImage {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transform: scale(1);
  transform: scale(1);
}

.showCase .swiper-slide>p {
  font-size: var(--txt18);
  line-height: var(--line-height140);
  color: var(--third-color);
}


/* showCase animation */

@keyframes fadeIn-top {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateY(-500%);
    opacity: 0;
  }
}

@-webkit-keyframes fadeIn-top {
  0% {
    opacity: 1;
  }
  100% {
    transform: translateY(-500%);
    opacity: 0;
  }
}

.showCase.active .showCase--content .title {
  width: 0;
  animation: fadeIn-top 3s forwards;
}

.showCase.active .showCase--content .showCase--slider {
  width: 100%;
  transition: width 2s;
}

<link  rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<section class="section1"></section>

<section class="showCase" id="showCase">
  <div class="showCase--content">
    <div class="title">
      <h3> Showcases</h3>
    </div>

    <div class="showCase--slider">
      <div class="swiper SwiperShowCase">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            1
            <div>
              <img src="http://commondatastorage.googleapis.com/codeskulptor-assets/lathrop/nebula_brown.png" alt="" class="indicatorImage" />
            </div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
          <div class="swiper-slide">
            2
            <div>
              <img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back05.jpg" alt="" class="indicatorImage" />
            </div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
          <div class="swiper-slide">
            3
            <div>
              <img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back04.jpg" alt="" class="indicatorImage" />
            </div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
          <div class="swiper-slide">
            4
            <div>
              <img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back07.jpg" alt="" class="indicatorImage" />
            </div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
          <div class="swiper-slide">
            5
            <div>
              <img src="http://codeskulptor-demos.commondatastorage.googleapis.com/GalaxyInvaders/back02.jpg" alt="" class="indicatorImage" />
            </div>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
  </div>
</section>

<section class="section2"></section>