実現したいこと
通常通り、画像スライドショーを実現したい。
前提
参考書通りにコードコピー貼り付けしました。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
html
1<!DOCTYPE html>2<html lang="ja">3 4<head>5 <meta charset="utf-8">6 <title>LP ORIGINAL</title>7 <meta name="description" content="">8 <meta name="viewport" content="width=device-width,initial-scale=1.0">9 10 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/css/reset.css">11 <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/style.css">12 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.css">13 <?php wp_head(); ?>14</head>15 16<body>17 <main>18 <h2>アイキャッチ</h2>19 <div id="slider"></div>20 21 </main>22 23 <footer id="footer">24 <small>© copyright.</small>25 </footer>26 <?php wp_footer(); ?>27 28 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>29 <script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.4/vegas.min.js"></script>30 <!--自作のJS-->31 <script src="<?php echo get_template_directory_uri(); ?>/js/script.js"></script>32</body>33 34</html>
css
1#slider {2 width: 100%;3 height: 100vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/4}
js
1var windowwidth = window.innerWidth || document.documentElement.clientWidth || 0;2if (windowwidth > 768) {3 var responsiveImage = [//PC用の画像4 { src: '../img/24389418_m-1280x960.jpg' },5 { src: '../img/24389418_m-1280x960.jpg' },6 { src: '../img/24389418_m-1280x960.jpg' }7 ];8} else {9 var responsiveImage = [//タブレットサイズ（768px）以下用の画像10 { src: './img/img_sp_01.jpg' },11 { src: './img/img_sp_02.jpg' },12 { src: './img/img_sp_03.jpg' }13 ];14}15 16//Vegas全体の設定17 18$('#slider').vegas({19 overlay: true,20 transition: 'blur',21 transitionDuration: 2000,22 delay: 10000,//スライド間の遅延をミリ秒単位で。23 animationDuration: 20000,24 animation: 'kenburns',25 slides: responsiveImage,//画像設定を読む26 //timer:false,27});
試したこと
画像パスが悪いと思い、下記してもダメでした。
js
1var windowwidth = window.innerWidth || document.documentElement.clientWidth || 0;2if (windowwidth > 768) {3 var responsiveImage = [//PC用の画像4 { src: '<?php echo get_template_directory_uri(); ?>/img/24389418_m-1280x960.jpg' },5 { src: '<?php echo get_template_directory_uri(); ?>/img/24389418_m-1280x960.jpg' },6 { src: '<?php echo get_template_directory_uri(); ?>//img/24389418_m-1280x960.jpg' }7 ];8} else {9 var responsiveImage = [//タブレットサイズ（768px）以下用の画像10 { src: './img/img_sp_01.jpg' },11 { src: './img/img_sp_02.jpg' },12 { src: './img/img_sp_03.jpg' }13 ];14}15 16 17### 補足情報（FW/ツールのバージョンなど） 18 19現在表示されてる画像 20読み込まれてるっぽいですが、画像だけ出ないです。 2122 23フォルダ構成 2425 26コンソールエラー画像 2728 2924389418_m-1280x960.jpg:1 Failed to load resource: the server responded with a status of 404 (Not Found)3024389418_m-1280x960.jpg:1 Unchecked runtime.lastError: The message port closed before a response was received.31 32js展開画像33
0 コメント