実際に作成したサンプルです。

実装方法はとてもシンプルで、背景の切り替えをbx-slider、セクションごとの全画面表示をscrollifyで制御しています。

デモ

それぞれの jsファイル と、 bx-sliderのCSSファイル を設置します。
下記のコードをhead内にコピペするか、 github からファイルをダウンロードしてください。

<link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.20/jquery.scrollify.js"></script>

githubからダウンロードはこちら。

<div class="sec sec01 current">
  1
</div>
<div class="sec sec02">
  2
</div>
<div class="sec sec03">
  3
</div>
<ul class="bg-img-box slider">
  <li class="bg-img bg-img01 current"></li>
  <li class="bg-img bg-img02"></li>
  <li class="bg-img bg-img03"></li>
</ul>

全画面表示させる要素.secと、背景画像となる要素.sliderを設置します。
.sec01には、あらかじめ.currentを追加しておきます。

js についてはコード内に補足を記載しました。参考サイトもあわせて記載しておきます。

<script>
// scrollify のオプション
var option = {
  easing: "swing",
  scrollSpeed: 600,
  scrollbars: false
};

// scrollify
$(function() {
  $.scrollify({ 
  section : ".sec",
  before:function(index, sections) {
    // 現在位置を取得（indexからn番目）
    var current = index+1;
    // .sec に クラス「current」 が付いていたら削除
    $(".sec").removeClass("current");
    // 現在の .sec に クラス「current」 を追加
    $(".sec:nth-child("+current+")").addClass("current");
    // .bg-img に クラス「current」 が付いていたら削除
    $(".bg-img").removeClass("current");
    // 現在の .bg-img に クラス「current」 を追加
    $(".bg-img:nth-child("+current+")").addClass("current");
            }, 
  });
  
  // slider
  $('.slider').bxSlider({
    mode: 'fade',
    infiniteLoop: false, // 無限ループ禁止
    touchEnabled: false, // タッチ（ドラッグ）での制御禁止
    pager: false, // ページャー非表示
    controls: false, // コントロール非表示
   });
});
</script>

スクロールをセクションごとに制御するプラグイン「jQuery Scrollify」を詳しく解説！ | Web Design DAY

スクロールをセクションごとに制御してくれるプラグイン「jQuery Scrollify」。主に縦に長いLPなどでよく使用されているので、ちょこっとスクロールした...

https://webdesignday.jp/inspiration/technique/jquery-js/3812/

https://stackoverrun.com/ja/q/12456136

CSS指定は基本お好みで。必須なものだけ記載しています。

CSS反映後のイメージ。 .sec と .slider を重ねている。

.sec {
    width: 100%;
    z-index: 999;
    position: relative;
}

.bg-img-box {
    width: 100%;
    height: 100%;
}

.bg-img {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    opacity: 0;
    display: block !important;
    transition: opacity 2s;
}

.bg-img.current {
    opacity: 1;
    display: block !important;
    transition: opacity 1s;
}

.bg-img01 {
    background: url(背景画像1) no-repeat center / cover;
}

.bg-img02 {
    background: url(背景画像2) no-repeat center / cover;
}

.bg-img03 {
    background: url(背景画像3) no-repeat center / cover;
}

/* bx-slider */
.bx-wrapper {
    border: none !important;
    box-shadow: none !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bx-viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 100%;
}