Q&A
コードを書くときは〈code〉を使って下さい。まずは最小構成でswiperを実装するところから始めましょう。
### 前提・実現したいこと
LPを制作しています。
swiperの利用によりスライドショーを設置しようと思っています。
ネットで調べて試してみましたが、作動しません。
発生している問題・エラーメッセージ
一部のエラーではなく、全く作動しません。
autoplay.js:87 Uncaught TypeError: Cannot read property 'addEventListener' of undefined at autoplay.js:87 at Array.forEach (<anonymous>) at t.pause (autoplay.js:86) at t.onVisibilityChange (autoplay.js:95) (anonymous) @ autoplay.js:87 pause @ autoplay.js:86 onVisibilityChange @ autoplay.js:95 utils.js:28 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. at utils.js:28 at T (utils.js:45) at t.getTranslate (getTranslate.js:15) at t.loopFix (loopFix.js:20) at autoplay.js:36
該当のソースコード
[HTML] <!-- スライダーのメインコンテナの div 要素 --> <div class="swiper-container"> <!-- ラッパー(クラス名=slider)の（スライドを囲む） div 要素 --> <div class="card-slider"> <!-- それぞれのスライドの div 要素（１） --> <div class="slider"> <img src="img/digital-marketing-1433427_1280.png" alt="実績画像1"> <div class="slider-txt"> <h3>株式会社サンプル採用サイトのコーディングを行いました！</h3> <p></p> </div> </div> <!-- それぞれのスライドの div 要素（２） --> <div class="slider"> <img src="img/arnel-hasanovic-MNd-Rka1o0Q-unsplash.png" alt="実績画像2"> <div class="slider-txt"> <h3>コーディングカンファレンスのイベント LPの制作を行いました！</h3> <p>採用技術：jQuery,WordPress<br>実装期間：4週間<br>担当コーダー：石井</p> </div> </div> <!-- それぞれのスライドの div 要素（３） --> <div class="slider"> <img src="img/digital-marketing-1433427_1280.png" alt="実績画像3"> <div class="slider-txt"> <h3>株式会社サンプル様採用サイトのコーデ ィングを行いました！</h3> <p>採用技術：jQuery,Bootstrap4<br>実装期間：2週間<br>担当コーダー：石井</p> </div> </div> <!-- それぞれのスライドの div 要素（４） --> <div class="slider"> <img src="img/hal-gatewood-tZc3vjPCk-Q-unsplash.png" alt="実績画像4"> <div class="slider-txt"> <h3>株式会社サンプル様通販サイトのコーデ ィングを行いました！</h3> <p>採用技術：jQuery,Bootstrap4<br>実装期間：6週間<br>担当コーダー：石井</p> </div> </div> <!-- それぞれのスライドの div 要素（５） --> <div class="slider"> <img src="img/digital-marketing-1433427_1280.png" alt="実績画像5"> <div class="slider-txt"> <h3>株式会社サンプル採用サイトのコーディ ングを行いました！</h3> <p>採用技術：jQuery,Bootstrap4<br>実装期間：2週間<br>担当コーダー：石井</p> </div> </div> </div><!-- ラッパー(クラス名=slider)の（スライドを囲む） div 要素 --> </div><!-- スライダーのメインコンテナの div 要素 -->
[CSS] .card-slider { display: flex; justify-content: space-between; } .slider { width: 322px; background: #FFFFFF 0% 0% no-repeat padding-box; border: 1px solid #DDDDDD; border-radius: 8px; } .slider img { width: 100%; } .slider-txt { padding-top: 18px; padding-left: 18px; padding-right: 17px; text-align: left; height: 196px; position: relative; } .slider-txt h3 { font-size: 16px; line-height: 24px; font-weight: bold; } .slider-txt p { bottom: 30px; position: absolute; }
[JavaScript(htmlファイル)] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <title>Document</title> </head> (中略) ～</footer> <script src="js/script.js"></script> <script> var mySwiper = new Swiper ('.swiper-container', { // 以下にオプションを設定 loop: true, autoplay:{ delay: 5000, }, }); </script> </body> </html>
試したこと
ネットやYouTubeで検索して、よくある対処法を試しました。
（読み込めているか）
■ バージョン
⇒6(クローム使用）
■ パスの記載
⇒「https://」「http://」の違いで読み込めないことを防止するために､「//」だけにすることをおすすめします｡
→とありましたが、「//」だけにすると別のエラーがでましたので、「https://」に戻しました。
(オプションの記述方法変更）
■ autoplay:true,delay: 5000,
⇒autoplay:{
delay: 5000,
},
に変更しました。
(エラーの確認）
■ Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at utils.js:28
⇒とありましたが、「at utils.js:28」となっていますので読み込んだ元のコードのことかと思い、対処法も調べてみましたが、よくわかりませんでした。
補足情報（FW/ツールのバージョンなど）
■ swiper⇒バージョン6
2021/7/6 質問を取り下げます。
「まずは最小構成で」と指摘されている部分が対応されていません。
@m.ts10806様
ご連絡ありがとうございます。
「中略」とはheader以下のHPのメイン部分です。
「中略」しないとページ全てを記載することになるので、
他の参考ページを見る限り今回の事象には関連がなさそうでしたので、
記載を省略させていただきました。
（※</footer>が見えるようにして、そのような意図がご理解いただければとの主旨でした。）
配慮が足りないとの仰せですが、「コピペ再現できない」のが不明なのと
それが配慮不足であるとの認識が投稿初心者の私の不明です。
又「最小構成で」との指摘に対応していないようにご記載されていますが、
エラーメッセージにautoplayが出ているので関連があるかもしれないとの可能性も考慮し、
自分なりに最小限にしたつもりです。
プロフィール拝見いたしました。
ＳＥをされていて知識も豊富な方なのでしょうね。
経験豊富な方からすれば、無知が配慮不足のように思えるでしょうし、
修正指示がされていないように見えるのでしょう。
大変恐縮ですが、短めの文体で伝わりづらい中で、
「最少」なども数値で定義されているわけはないので、
齟齬もあるかと思いますが、
その中で顔も知らない面識もない人同士のコミュニケーションとして、
短いコメントで正直威圧を感じました。
仮にせっかくご回答いただいてもコミュニケーションの違いが大きいようで、
又そこからやり取りが複雑になりそうですので、
未解決ですが今回のこの質問は取り下げをさせていただきます。
私のような初心者が投稿するような場ではないようですね。
ご対応いただいたことには感謝いたします。
お手数をおかけしました。
自己解決
