画像を表示したいです。

トップページで画像ををズームアウトしながらフェードするスライドショーに挑戦しています。
https://github.com/mingyeungs/jquery-zoomsliderのzoomslider.jsを
使用させていただきながら作業を進めています。

作業の中で、画像が表示されない問題が発生していて
表示したいです。

発生している問題

<div id="demo-1" data-zs-src='["assets/slide-topimg01.jpg", "assets/slide-topimg02.jpg", "assets/slide-topimg03.jpg"]' data-zs-speed="8000" data-zs-switchSpeed="800" data-zs-interval="4500" data-zs-overlay="dots">
<div class="inner-content"><img src="assets/logo.png" alt=""></div>
</div>

上記のようにdata-zs-srcの中に画像を記入した時、
『The value of attribute [data-zs-src] must be in double quotes. 』
とエラーが出たので、下記のように修正しました。
（Google翻訳曰く、『属性[data-zs-src]の値は二重引用符で囲む必要があります。』とのことだったので。）

自分なりの対処

<div id="demo-1" data-zs-src="['assets/slide-topimg01.jpg', 'assets/slide-topimg02.jpg', 'assets/slide-topimg03.jpg']" data-zs-speed="8000" data-zs-switchSpeed="800" data-zs-interval="4500" data-zs-overlay="dots">
<div class="inner-content"><img src="assets/logo.png" alt=""></div>
</div>

上記のように""で編集したつもりでしたが画像は表示されませんでした。
assets/を./assets/,../assets/にもしてみましたが、ダメでした。

CSS

#demo-1{
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

.inner-content img{
width: 7%;
}

.inner-content{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

追加した色々※画像のパスは自己流です。


<link rel="stylesheet" type="text/css" href="jquery/js/dist/zoomslider.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery/js/modernizr-custom.js"></script>
<script type="text/javascript" src="jquery/js/dist/jquery.zoomslider.min.js"></script>

補足情報（FW/ツールのバージョンなど）

DWを使用しています。
DWの画像の上にカーソルをおくと画像が見える機能があるのですが、
それにも反応しませんでした。

画面いっぱいのスライドショーを理想としています。

何か改善点ありましたら教えてください。
他にも書き方作り方があればぜひご教示いただきたいです。
どうぞよろしくお願いします。

m.ts10806

2020/01/18 07:42

フォルダ構成をご提示ください

renmo

2020/01/18 08:07

ご意見ありがとうございます。フォルダ構成は下記の通りです。わかりにくかったらごめんなさい。???? html ├──jquery──js──modernizr-custom.js,jquery.bgswitcher.js,jQuery-3.3.1.min.js──dist──zoomslider.css,jquery.zoomslider.min.js ├──assets ├──css──style.css ├──index.html