DAY04.html

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>Slideshow</title>
	<link rel="stylesheet" href="css/slideshow.css">
</head>
<body>
	<div class="wrapper">
        <div id="container">
            <img src="images/pic-1.jpg">
            <img src="images/pic-2.jpg">
            <img src="images/pic-3.jpg">
            <img src="images/pic-4.jpg">
            <button id="prev">&lang;</button>
            <buttton id="next">&rang;</buttton>
        </div>
	</div>

    <script>
        const slides = document.querySelectorAll("#container > img");
        const prev = document.querySelector("#prev");
        const next = document.querySelector("#next");
        let current = 0;

        showSlide(current);
        prev.addEventListener("click", prevSlide);
        next.addEventListener("click", nextSlide);

        function showSlide(n) {
            for (let i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slides[n].style.display = "block"
        }

        function prevSlide() {
            if (current > 0) current -= 1;
            else current = slides.length - 1;
            showSlide(current);
        }

        function nextSlide() {
            if (current < slides.length - 1) current += 1;
            else current = 0;
            showSlide(current);
        }

    </script>
	
</body>
</html>