Carousel

오른쪽 버튼 클릭 시

왼쪽 버튼 등장, 하단의 dot 두번째 칸으로 이동

오른쪽 버튼 클릭 (마지막 사진) 오른쪽 버튼 사라지고 왼쪽 버튼만 남음

---

HTML

<h1>Carousel</h1>
    <div class="container">
        <div id="main">

            <!-- main image -->
            <img class="photo" 
            src="https://blog.kakaocdn.net/dn/eevGYy/btsbQyjQgy6/rDjOMvREEtKkVbKKjBVKV1/img.png" 
            alt="swiss">
            <img class="photo" 
            src="https://eb.findmybucketlist.com/bucket/new/cp/2944759_cp_00.jpg?update_date=2019-10-2916:53:29" alt="">
            <img class="photo"
            src="https://pds.joongang.co.kr/news/component/htmlphoto_mmdata/202110/14/2cff8a58-552f-49c2-b566-5ba73d343c96.jpg" alt="">
        </div>

        <!-- button -->
        <button class="hidden" id="left-btn" onclick="go(-1)">❮</button>
        <button id="right-btn" onclick="go(1)">❯</button>
        
        <!-- indicator -->
        <div class="indicator">
            <span id="dots" class="dot active"></span>
            <span id="dots" class="dot"></span>
            <span id="dots" class="dot"></span>
       </div>
    </div>

CSS

<style>
        * {
            box-sizing: border-box;
        }
        /* main(사진) */
        .container {
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }
        #main {
            height: 200px;
            display: inline-flex;
            transition: 0.2s;
        }
        .photo {
            width: 200px;
            height: 200px;
            object-fit: cover;
        }

        /*button*/
        #left-btn, #right-btn {
            cursor: pointer;
            color: white;
            background-color: transparent;
            border: none;
            font-weight: bold;
            font-size: 18px;
            align-items: center;
            position: absolute;
        }
        #left-btn {
            top: 50%;
            left: 0;

        }
        #right-btn {
            top: 50%;
            right: 0;
        }
        
        /*indicator*/
        .indicator {
            position: absolute;
            bottom: 0.5rem;
            text-align: center;
            width: 100%;
        }
        .dot {
            display: inline-block;
            cursor: pointer;
            height: 0.5rem;
            width: 0.5rem;
            background-color: white;
            border-radius: 50%;
            opacity: 0.5;
        }
        .active {
            opacity: 1;
        }
        .hidden {
            visibility: hidden;
        }
    </style>

JS

<script>
		// 메인 이미지
        var main = document.getElementById("main");
        
        // 왼쪽 버튼
        var leftBtn = document.getElementById("left-btn");
        
        // 오른쪽 버튼
        var rightBtn = document.getElementById("right-btn");
        
        // 하단의 dots
        var dots = document.getElementsByClassName("dot");
        
        // 이미지의 넓이
        var sideWidth = 200;
        
        var lastIndex = 0;
        var nowIndex = 0;

        console.log(leftBtn)
        console.log(rightBtn)
        console.log(dots)
        console.log(main)

        function go(i) {

			// i값 증가
            nowIndex += i;

            console.log(lastIndex)
            console.log(nowIndex)

            // button
            // 현재 인덱스가 0일 때(오른쪽 버튼 안 보이게)
            if (nowIndex == 0) {
                leftBtn.classList.add('hidden')
            } else {
                leftBtn.classList.remove('hidden')
            }

			// 현재 인덱스가 2일 때(왼쪽 버튼 안 보이게)
            if (nowIndex == 2) {
                rightBtn.classList.add('hidden');
            } else {
                rightBtn.classList.remove('hidden');
            }

            // dot
            dots[lastIndex].classList.remove('active');
            dots[nowIndex].classList.add('active');

            lastIndex = nowIndex;

            /*img 이동*/
            // now가 0 * side가 200 -> 0만큼 이동(음수도 적용)
            // now가 1 * side가 200 -> 200만큼 이동(음수도 적용)
            // now가 2 * side가 200 -> 400만큼 이동(음수도 적용)
           main.style.transform = `translateX(-${nowIndex * sideWidth}px)`;

        }

    </script>

---

translate 속성

• translateX() : 괄호 안의 숫자만큼 수평 방향으로 이동
  (음수 : 왼, 양수 : 오른)

• translateY() : 괄호 안의 숫자만큼 수직 방향으로 이동
  (음수 : 위, 양수 : 아래)

• translate(x, y) : 괄호 안의 숫자만큼 수평, 수직 방향으로 이동 -> 대각선