bg-sliderを使用してメインビジュアルを表示させたい

前提・実現したいこと

【前提】
WordPress 5.7.2
自作テーマ

【実現したいこと】
・jQueryプラグインのbg-sliderを使用してメインビジュアルを表示させたい
・画像の出力をしたい
・出力のために適切な階層を知りたい
・起点となるファイルを知りたい

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

bg_hero_01.jpg:1 GET http://kagu.local/img/desktop/bg_hero_01.jpg 404 (Not Found)

現状（背景表示されない）
背景

404ということで画像ファイルを検出できない状況ということはなんとなくわかるのですが、
階層までの青謡パスを導けずにいます。

該当のソースコード

php
1<main class="main">
2    <!-- mv -->
3    <section class="bg-slider u-base_position" id="mv">
4      <p class="p-main_catch mv"><span class="u-main_catch_span">自分らしさを</span><span class="u-main_catch_span">レイアウトする</span></p>
5    </section>
6    <!-- mv end -->
7     *****
8     ****
9     ***
10</main>

js
1  <script>
2    jQuery(function($) {
3      $('.bg-slider').bgSwitcher({
4        images: ['../img/desktop/bg_hero_01.jpg', '../img/desktop/bg_hero_02.jpg', '../img/desktop/bg_hero_03.jpg'], // 切り替える背景画像を指定
5        effect: "extraSlide",
6      });
7    });
8  </script>

ファイル階層

試したこと

scssで背景画像を表示させること自体はできたのですが、bg-sliderプラグインを使用して背景画像を表示・スライドさせようと試みると404エラーにハマります。
試した相対パスを下記に記載します。

js
1images: ['../img/desktop/bg_hero_01.jpg', ...]
2images: ['../../img/desktop/bg_hero_01.jpg', ...]
3images: ['img/desktop/bg_hero_01.jpg', ...]
4images: ['bg_hero_01.jpg', ...]

いずれのものも表示されず、表示だけできたscssを下記に記載します。

scss
1  .bg-slider {
2    background: url('../img/desktop/bg_hero_01.jpg') no-repeat;
3    background-position: right;
4    background-size: cover;
5  }
6