jQueryプラグインのbgswitcherを使った際に、背景画像が表示されない問題について

ローカルで静的サイトを作成しています。
サイトのファーストビューにbgswitcherを使って、3枚の背景画像を自動でふわっと切り替えようと試みているのですが、
なぜか画像が表示されません。

以下がコードになります。
HTML

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="jquery/jquery-3.4.1.min.js"></script>
  <script src="jquery/jquery.bgswitcher.js"></script>
  <title></title>
</head>
<body id="top">
  <section class="firstview bg-slider">
    <h1 class="top-title01"></h1>
    <h3 class="top-title02"></h3>
  </section>

対象のcssは以下になります。

.bg-slider{
  background: url("../image/firstview02.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
　align-items: center;
　justify-content: center;
}

jQueryは以下になります。

$(window).on('load',function() {
  $('.bg-slider').bgSwitcher({
    images: ['../image/firstview02.jpg','../image/firstview01.jpg','../image/firstview03.jpg'], 
    interval: 4000, 
    loop: true, 
    shuffle: true, 
    effect: "fade", 
    duration: 2000,
    easing: "swing" 

  });
});

検証画面で対象のdivを確認すると、

<div style="position: absolute; z-index: -1; overflow: hidden; background: url(&quot;../image/firstview03.jpg&quot;) 50% 50% / cover no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); top: 0px; left: 0px; width: 449px; height: 766px; margin: 0px; border-width: 0px; border-style: none; border-color: rgb(0, 0, 0);"><div style="position: absolute; z-index: -1; overflow: hidden; background: url(&quot;../image/firstview01.jpg&quot;) 50% 50% / cover no-repeat scroll padding-box border-box rgba(0, 0, 0, 0); top: 0px; left: 0px; width: 449px; height: 766px; margin: 0px; border: none; opacity: 0;"></div></div>

なお、Googleコンソールでは以下のようなエラー表示が画像が読み込まれるごとに永遠に表示されます。

/Users/myname/Desktop/image/firstview01.jpg:1 GET file:///Users/myname/Desktop/image/firstview01.jpg net::ERR_FILE_NOT_FOUND

/Users/myname/Desktop/image/firstview02.jpg:1 GET file:///Users/myname/Desktop/image/firstview02.jpg net::ERR_FILE_NOT_FOUND

/Users/myname/Desktop/image/firstview03.jpg:1 GET file:///Users/myname/Desktop/image/firstview03.jpg net::ERR_FILE_NOT_FOUND

jquery-3.4.1.min.js:2 GET file:///Users/myname/Desktop/image/firstview03.jpg net::ERR_FILE_NOT_FOUND

jquery-3.4.1.min.js:2 GET file:///Users/myname/Desktop/image/firstview02.jpg net::ERR_FILE_NOT_FOUND

jquery-3.4.1.min.js:2 GET file:///Users/myname/Desktop/image/firstview01.jpg net::ERR_FILE_NOT_FOUND

色々ネットで記事を探してみたのですが、z-indexが-1になっていることが原因なのでしょうか？
もしその場合、どこを修正したらよいのでしょうか。。

教えて頂けますと幸いです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

エラーには、
指定された場所に画像を取得しにいったが画像が見つからないと書いてありますが
設定してる画像のパスは正しいですか？

投稿2020/05/01 17:23

退会済みユーザー

総合スコア0

aizen66

2020/05/01 17:58

jQueryの画像は相対パスで指定しており、カーソルホバーすると、画像が表示されているので、合っていると思うのですが。。 cssに記述している background: url("../image/firstview02.jpg"); は関係あるのでしょうか。

退会済みユーザー

2020/05/02 02:23

ご提示のコードで確認しましたが、画像の設定を変更して動いたのでパスが間違っているのかなと思いました、、、「/Users/myname/Desktop/image/firstview01.jpg」の場所に画像を読みに行っていますので、ここに画像を置いていればパスはあっています。合ってるのであれば謎ですね。 >cssに記述している >background: url("../image/firstview02.jpg"); >は関係あるのでしょうか。 CSSでbackground画像を指定した場合、bgswitcher側で打ち消されるみたいなので、その指定自体効いていないと思います。なので、関係はないと思います。

aizen66

2020/05/02 04:03

Lishさんのおっしゃる通りで、やはりパスに問題がありました。。 jQueryの以下のコードで、/image/の前にサイトのフォルダ名が抜けていたので、フォルダ名を書き加えたら、正常に作動しました。 images: ['../image/firstview02.jpg','../image/firstview01.jpg','../image/firstview03.jpg'], 初歩的なミスでした。。ご丁寧にアドバイスいただき、本当にありがとうございました！！

退会済みユーザー

2020/05/02 04:10

やはりパスの問題でしたか。＞カーソルホバーすると、画像が表示されているこれはエディタの機能なのかなと思いますが、なぜパスが合っているような振る舞いをしてたのでしょうね、、、惑わされずに実際のファイルの場所を確認して設定するのが確実そうですね。とりあえず解決できたとのことで、良かったです^^

行動規範の内容に同意します