在我的網站上添加了swiper-slider，完成了樣式的工作，但是我注意到slider的幻燈片相互重疊。 代碼如下:

HTML:

<section class="slider">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 1
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 2
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 3
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 4
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 5
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
        <div class="swiper-slide">
          <h3 class="slide__title">
            Then they show that show to the 
            people who make shows 6
          </h3>
          <p class="slide__text">
            The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
          </p>
        </div>
      </div>
      <div class="swiper-button-prev swiper-button">
        <span class="swiper-button__decor swiper-button__decor-prev"></span>
      </div>
      <div class="swiper-button-next swiper-button">
        <span class="swiper-button__decor swiper-button__decor-next"></span>
      </div>
      <div class="swiper-pagination"></div>
    </div>
  </section>

CSS:

.slider{
  background-color: #F6F8FA;
}

.swiper-slide{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 135px;
}

.slide__title{
  font-family: Montserrat;
  font-size: 40px;
  line-height: 1.3;
  max-width: 705px;
  margin-bottom: 35px;
}

.slide__text{
  max-width: 560px;
  color: #777777;
}

.swiper-button-prev::after,
.swiper-button-next::after{
  color: #333333;
}

.swiper-button__decor{
  position: absolute;
  display: inline-block;
  height: 3px;
  width: 30px;
  background-color: #333333;
}

.swiper-button__decor-prev{
  left: 5px;
}

.swiper-button__decor-next{
  right: 5px;
}

.swiper-pagination-bullets{
  width: initial !important;
  padding-left: 135px;
}

.swiper-pagination-bullet{
  width: 6px;
  height: 6px;
}

.swiper-pagination-bullet-active{
  background-color: #242121;
  width: 10px;
  height: 10px;
}

Javascript:

const swiper = new Swiper(".swiper", {
    effect: "fade",
    loop: true,
    pagination: {
        el: ".swiper-pagination",
    },
    autoplay: {
        delay: 3000,
        disableOnInteraction: false,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
});

我不知道該拿那個lol怎么辦。但是我試著禁用所有的CSS樣式來看它能解決我的問題嗎，但是它不起作用，一點也不起作用。附言:當你試圖向后滾動幻燈片時——沒關系，一切正常，但當你滾動到下一張幻燈片時——就發生了糟糕的事情。真的很奇怪的東西

很有可能，這是當前版本的bug。你可以向新問題報告。 要解決這個問題，您可以這樣做:

.swiper-slide {
  opacity: 0!important;
}

.swiper-slide-active {
  opacity: 1!important;
}

例子