実現したいこと
初心者です。
自作の完成したページをサーバーに上げたところ、レイアウト崩れが起こりました。
エラーを解決したいです。
発生している問題・分からないこと
5枚のメイン画像が横に流れるはずが、縦並びに全て出てしまっており、
slickスライダー、カルーセル、ハンバーガーメニューのボタンまで効かなくなりました。
元のファイル(サーバーアップ前のもの)はjsが機能しており、コードを変えていないので、
サーバーにアップする段階で問題が起きたように思います。
エラーメッセージ
error
11: 2index.html:1 Failed to find a valid digest in the 'integrity' attribute for resource 'https://code.jquery.com/jquery-3.6.0.min.js' with computed SHA-256 integrity '/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4='. The resource has been blocked. 3 42: 5Uncaught ReferenceError: jQuery is not defined 6 at slick.min.js:1:152 7 at slick.min.js:1:160 8 93: 10carousel.js:1 Uncaught ReferenceError: $ is not defined 11 at carousel.js:1:1 12 134: 14Uncaught ReferenceError: $ is not defined 15 at hamburger.js:1:1
該当のソースコード
HTML
1<head>タグ内 2 3<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> 4 <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> 5 6~~ 7 8<body>閉じタグ前 9 10<script 11 src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 12 crossorigin="anonymous"></script> 13 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 14 <script src="./js/carousel.js"></script> 15 <script src="./js/hamburger.js"></script>
carousel.js
1$(document).ready(function(){ 2 $('.carousel').slick({ 3 autoplay: true, 4 autoplaySpeed: 5000, 5 arrows: false, 6 dots: true, 7 fade: true, 8 }); 9});
hamburger.js
1$(document).ready(function(){ 2 $(".hamburger-button").on("click", function(){ 3 $(".sp-nav").slideToggle(); 4 }); 5}); 6
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
自分なりに調べたものの、解決しておりません。
補足
特になし
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/09/07 15:07