背景をフェードでスライドさせる
Swiper.jsの使い方

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

window.addEventListener('load', () => {
    const elem = document.querySelector('.p-swiper-container');
    if (elem === null) return;
    const swiperParams = {
      loop: true, // ループさせる
      effect: 'fade', // フェードのエフェクト
      autoplay: {
        delay: 4000, // ４秒後に次の画像へ
        disableOnInteraction: false, // ユーザー操作後に自動再生を再開する
      },
      speed: 2000, // ２秒かけながら次の画像へ移動
      allowTouchMove: false, // マウスでのスワイプを禁止
      navigation: {
        // 左右のページ送りを有効にする
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        // 円形のページネーションを有効にする
        el: '.swiper-pagination',
        clickable: true, // クリックを有効にする
      },
    };
    const swiper = new Swiper('.p-swiper-container', swiperParams);
  });

.p-swiper-container{
  position: relative;
}
.swiper-slide {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 60vh;
    overflow: hidden;
}
.p-swiper__desc {
  position: absolute;
  width: 100%;
  text-align: center;
  color: white;
  top: 45%;
  transform: translateY(-50%);
}
.p-swiper__heading {
  font-size: 40px;
  padding-bottom: 10px;
}
.p-swiper__text {
  font-size: 21px;
}

<div class="p-swiper-container" style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <div class="swiper-slide" style="background-image: url('./images/fadeslide01.jpg');">
            <div class="p-swiper__desc">
                <h3 class="p-swiper__heading">徘徊するゴリラ</h3>
                <div class="p-swiper__text">
                    <p>ジャングルを歩きまわることから１日が始まる</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide" style="background-image: url('./images/fadeslide02.jpg');">
            <div class="p-swiper__desc">
                <h3 class="p-swiper__heading">威嚇するゴリラ</h3>
                <div class="p-swiper__text">
                    <p>メスを守るためにオスは強くならなくてはならない</p>
                </div>
            </div>
        </div>
        <div class="swiper-slide" style="background-image: url('./images/fadeslide03.jpg');">
            <div class="p-swiper__desc">
                <h3 class="p-swiper__heading">驚くゴリラ</h3>
                <div class="p-swiper__text">
                    <p>ゴリラだってびっくりしてもいいじゃない</p>
                </div>
            </div>
        </div>
    </div>

    <!-- pagination -->
    <div class="swiper-pagination"></div>

    <!-- navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>