주어진 코드를 수정하여 홈페이지의 기능을 완성하십시오. index.html: ```html Slideshow
``` styles.css: ```css main { width: 300px; margin: 0 auto; } img { vertical-align: bottom; } ul { list-style: none; padding: 0; margin: 0; } #main { width: 300px; height: 200px; } nav { margin: 8px 0; /* margin-bottom: 8px; */ } nav ul { display: flex; justify-content: space-between; } nav li { border: 1px solid #ddd; border-radius: 4px; font-size: 12px; padding: 4px; text-align: center; cursor: pointer; user-select: none; } nav li:hover { background: #f8f8f8; } #next, #prev { width: 135px; } .thumbnails { display: grid; grid-template-columns: repeat(5, 56px); gap: 5px; } .thumbnails li { cursor: pointer; opacity: 0.4; } .thumbnails li:hover, .thumbnails li.current { opacity: 1; } /* oshitemo nani mo okoranai yo */ .thumbnails li.current { cursor: inherit; } .thumbnails img { width: 56px; } ``` main.js: ```javascript "use strict"; { const images = [ "img/pic00.png", "img/pic01.png", "img/pic02.png", "img/pic03.png", "img/pic04.png", ]; let currentIndex = 0; const mainImage = document.getElementById("main"); mainImage.src = images[currentIndex]; images.forEach((image, index) => { const img = document.createElement("img"); img.src = image; const li = document.createElement("li"); if (index === currentIndex) { li.classList.add("current"); } li.addEventListener("click", () => { mainImage.src = image; const thumbnails = document.querySelectorAll(".thumbnails > li"); thumbnails[currentIndex].classList.remove("current"); thumbnails[index].classList.add("current"); currentIndex = index; }); li.appendChild(img); document.querySelector(".thumbnails").appendChild(li); }); const next = document.getElementById("next"); next.addEventListener("click", () => { // ここにコードを入力してください。 }); const prev = document.getElementById("prev"); prev.addEventListener("click", () => { // ここにコードを入力してください。 }); } ``` 수정할 파일은 `main.js`입니다. 코드의 주석을 참고하여 수정할 부분을 모두 찾은 뒤, 완성된 코드를 제출하십시오.