<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="サイトのURL/js/jquery.bgswitcher.js"></script>

<div class="bg-slider">
    <h1 class="bg-slider_title">MEMORANDUM<br>jQuery<br>BgSwitcher.js</h1>
  </div>

.bg-slider {/*背景画像表示の設定*/
align-items: center;/*フレックスコンテナのクロス軸の中央に揃える*/
background-position: center center;/*画像背景を上下中央に配置*/
background-size: cover;/*画像をコンテナーいっぱいに大きく拡大縮小*/
display:flex;/*フレックスボックスを利用*/
justify-content: center;/*アイテムを中央に寄せる*/
width: 100%;/*幅100％*/
}
.bg-slider::before {
content: "";/*何も表示しない*/
display: block;/*親要素の大きさが継承され１つのブロックとして認識*/
padding-top: 70%; /* 比率を指定 */
}
.bg-slider_title {/*表示させたい文字の設定*/
color: #ccc;
font-family:'Montserrat', sans-serif;
font-size: 450%;
font-weight: 700;
line-height: 1.0em;
padding-top: 0px;/*何も設定しなければ上下中央*/
text-align: center;
}

<script>
    jQuery(function($) {
        $('.bg-slider').bgSwitcher({//HTMLで設定しているCLASS名に合わせる
        images: ['サイトのURL/img/slide-6.png','サイトのURL/img/slide-5.png','サイトのURL/img/slide-7.png'], // 切り替える背景画像を指定
        interval: 10000, // 背景画像を切り替える間隔を指定 3000=3秒
        loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
        shuffle: false, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
        effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
        duration: 4000, // エフェクトの時間を指定します。
        easing: "linear" // エフェクトのイージングをlinear,swingから指定
        });
    });
  </script>