swiperのfade機能で前の画像の残像が残ってしまうのを解決したい。

前提・実現したいこと

発生している問題・エラーメッセージ

現在swiperにて４枚の画像のスライドショーを作成しています。
画像はスマホとPCで切り替えをする設定をしており、１枚の画像につき１テキストposition:abusolute;で重ねて表示しています。

独自のcssとjsでswiperのcssを上書きして実装しています。

swiperにはeffectでfadeを設定し、fadeEffectにcrossFade:trueをしていますが、次のスライドに移る時に前の画像の残像がうっすら残ってしまいます。
うっすら残像が残るのを回避して、fade機能を実現したいです。

該当のソースコード

＜html＞
<div id="top">
  <div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide">
               <div class="slider-txt">
                   <h2>タイトル</h2>
                   </div>
                   <picture>
                     <source media="(max-width: 750px)"srcset="./images/sp_img_01.png">
                      <img src="./images/img_01.png" alt="">
                   </picture> 
          　</div>
          <div class="swiper-slide">
               <div class="slider-txt">
                   <h2>タイトル</h2>
                   </div>
                   <picture>
                     <source media="(max-width: 750px)"srcset="./images/sp_img_01.png">
                      <img src="./images/img_02.png" alt="">
                   </picture> 
          　</div>
          <div class="swiper-slide">
               <div class="slider-txt">
                   <h2>タイトル</h2>
                   </div>
                   <picture>
                     <source media="(max-width: 750px)"srcset="./images/sp_img_01.png">
                      <img src="./images/img_03.png" alt="">
                   </picture> 
          　</div>
          <div class="swiper-slide">
               <div class="slider-txt">
                   <h2>タイトル</h2>
                   </div>
                   <picture>
                     <source media="(max-width: 750px)"srcset="./images/sp_img_01.png">
                      <img src="./images/img_04.png" alt="">
                   </picture> 
          </div>
        </div>
    </div>
         <div class="swiper-pagination"></div>
   </div>

＜独自css＞
/* slider */
.slider{
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -10;
}
.swiper-container {
    position: relative;
    overflow: hidden;
    height: 105vw;
    max-height: 502px;
    width: 100%;
}
.swiper-slide {
    text-align: center;
    line-height: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; 
    -webkit-box-pack: center; 
    -ms-flex-pack: center; 
    justify-content: center; 
}
.swiper-slide img{
    display: inline; 
    width: 100%;
    height: 100%;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
}
.slider-txt{
    position: absolute;
    top: 27.7%;
    left: 4.6%;
    letter-spacing: 1.8px;
    color: red;
    text-align: left;
}

/* slider */

＜独自js＞

$(function(){

    /* swiper */
    var swiper = new Swiper('.swiper-container', {
        loop: true,
        effect: "fade", 
        speed: 1500,
            fadeEffect: {
                crossFade: true
            },
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            clickable: true,
          },
          slidesPerView: 1,
          centeredSlides : true
    });
  });