前提
JavaScriptにてカルーセルを作っています。
nextボタンを実装中に以下のエラーメッセージが発生しました。
実現したいこと
nextボタンを押下すると画像が次の画像にスライドするようにしたいです。
発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read properties of undefined (reading 'getBoundingClientRect') at HTMLButtonElement.<anonymous> (main.js:16:34)
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"> <title>Monster Hunter Sunbreak</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="icon" href="img/favicon_logo.png"> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <h1> <a href="index.html"> <img src="img/logo_mhs.png" alt="MONSTER HUNTER"> </a> </h1> <nav> <a href="https://www.monsterhunter.com/ja/about/">モンスターハンターとは?</a> <a href="https://www.monsterhunter.com/ja/news/">ニュース</a> <a href="https://www.monsterhunter.com/ja/lineup/">タイトルラインナップ</a> </nav> </header> <main> <div class="container"> <div class="carousel"> <div class="slider-button"> <ul class="slides"> <!-- Iceborn --> <li> <a href="https://www.monsterhunter.com/ja/20211029/mhwi_usj_cooljapan2022/"> <img src="img/mhwi_211104_mhp.jpg" alt="モンスターハンター:アイスボーン"> </a> </li> <!-- Sunbreak --> <li> <a href="https://www.monsterhunter.com/rise-sunbreak/ja/"> <img src="img/rise-sunbreak_220630_mhp.jpg" alt="モンスターハンター:サンブレイク"> </a> </li> <!-- Rise --> <li> <a href="https://www.capcom.co.jp/monsterhunter/rise/platform.html"> <img src="img/rise_220701_mhp.jpg" alt="モンスターハンター:ライズ"> </a> </li> </ul> <button id="prev">«</button> <button id="next">»</button> </div> </div> </div> </main> <script src="js/main.js"></script> </body> </html>
CSS
main { width: 80%; } /* ↑全部完成したら外す */ .container { width: 300%; margin: 20px auto; height: auto; } .carousel { width: 100%; height: 100%; border-radius: 3px; display: flex; padding: 10px; /* ↑全部完成したら外す */ justify-content: flex-start; border: 2px solid orange; } /* .carousel { width: 100%; height: 100%; margin: 0 auto; padding: 0; overflow: hidden; position: relative; outline: 2px solid red; } */ .slider-button { display: flex; height: 100%; width: calc(100% / 3); position: relative; } .slides { display: flex; padding: 0; margin: 0; height: 100%; width: 100%; flex-shrink: 0; transition: transform 0.3s; /* overflow: hidden; */ border: 2px solid blue; } .slides li { flex-basis: 20%; width: 100%; flex-shrink: 0; flex: 1; list-style: none; } li { min-width: 100%; } li img { width: 100%; height: 100%; object-fit: cover; } #prev, #next { position: absolute; top: 50%; transform: translateY(-50%); height: 6vw; border: none; cursor: pointer; background-color: #4e2208; color: #fff; font-size: 24px; opacity: 0.8; } #prev:hover, #next:hover { opacity: 1.0; } #prev { left: 0; } #next { right: 0; }
JavaScript
{ // 要素の呼び出し const next = document.getElementById('next'); const prev = document.getElementById('prev'); const slider = document.querySelector('.slides'); // 定義 let currentSlider = 0; // 次へボタンの機能 next.addEventListener('click', () => { currentSlider++; const slideWidth = slider[0].getBoundingClientRect().width; slider.style.transform = `translateX(${-1 * slideWidth * currentSlider}px)`; }); // 前へボタンの機能 prev.addEventListener('click', () => { currentSlider--; const slideWidth = slider[0].getBoundingClientRect().width; slider.style.transform = `translateX(${-1 * slideWidth * currentSlider}px)`; });
試したこと
getBoundingClientRectが取得するWidthの領域の取得がうまくいっていないと思ったので、その周辺を確認しましたが、いくら調査しても動く気配がありませんでした。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/07/30 16:50
2022/07/30 18:21
2022/07/31 13:32