Slides overlap each other. (Swiper)

Added swiper-slider to my site, finished working on the styles, but then I've noticed that slides of the slider overlap each other. Here's the code:

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',
      },
});

I have no idea what to do with that lol. But I tried to disable all the CSS-styles to watch can it solve my problem, but it didn't work, not at all. P.S: when you try to scroll back through the slides - it's ok, everything works, but when you scroll to the next slide - shit happens. Something really strange lol

Most likely, this is a bug of the current version. You can report it to New issue.
To fix this, you can do this:

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

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

Example