JAVASCRIPT - 초급 6편

* 캐러셀 (이미지 슬라이드) 만들기

html

<div style="overflow: hidden;"> <!-- 화면 외부로 나가는 요소를 숨김 -->
        <div class="slide-wrap">
            <div class="slide-box">
                <img src="/imgae/car1.png" alt="">
            </div>
            <div class="slide-box">
                <img src="/imgae/car2.png" alt="">
            </div>
            <div class="slide-box">
                <img src="/imgae/car3.png" alt="">
            </div>
        </div>
</div>
<div class="btn-box">
        <button class="pre">이전</button>
        <button class="slide-1 border-black">1</button>
        <button class="slide-2">2</button>
        <button class="slide-3">3</button>
        <button class="next">다음</button>
</div>

css

* {
    margin: 0;
    padding: 0%;
}
.slide-wrap {
    width: 300vw;
    transition: all 1s;    /* 1초에 걸쳐서 실행 */
}
.slide-box {
    width: 100vw;
    float: left;
}
.slide-box img {
    width: 100%;
}
.btn-box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-box button {
    margin-left: 20px;
    padding: 10px 30px;
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}
.btn-box :first-child {
    margin-left: 0;
}
.border-black {
    background-color: black;
    color: white;
}

javascript

var count = 1; /* 현재 이미지의 위치 */
		document.querySelector(".slide-1").addEventListener("click", function () { // 1번 버튼 클릭 시
  			document.querySelector(".slide-wrap").style.transform = 'translateX(0vw)'; // X좌표를 0으로 이동하면서 
            count = 1; /* 위치를 1로 주고 */
            document.querySelector(".slide-1").classList.add("border-black");
            document.querySelector(".slide-2").classList.remove("border-black");
            document.querySelector(".slide-3").classList.remove("border-black"); /* 현재 해당하는 버튼에 class를 추가하여 style 부여 */
        })
        document.querySelector(".slide-2").addEventListener("click", function () {
            document.querySelector(".slide-wrap").style.transform = 'translateX(-100vw)';
            count = 2;
            document.querySelector(".slide-1").classList.remove("border-black");
            document.querySelector(".slide-2").classList.add("border-black");
            document.querySelector(".slide-3").classList.remove("border-black");
        })
        document.querySelector(".slide-3").addEventListener("click", function () {
            document.querySelector(".slide-wrap").style.transform = 'translateX(-200vw)';
            count = 3;
            document.querySelector(".slide-1").classList.remove("border-black");
            document.querySelector(".slide-2").classList.remove("border-black");
            document.querySelector(".slide-3").classList.add("border-black");
        })
		document.querySelector(".pre").addEventListener("click", function () { /* 이전 버튼 클릭 시 */
            if (count == 1) { /* 이미지 위치가 1일때 */
                count = 3; /* 이미지 위치를 3으로 이동 */
                document.querySelector(".slide-wrap").style.transform = 'translateX(-200vw)';
                document.querySelector(".slide-1").classList.remove("border-black");
                document.querySelector(".slide-2").classList.remove("border-black");
                document.querySelector(".slide-3").classList.add("border-black");
            } else if (count == 3) { /* 위와 동일하게 작동 */
                count = 2;
                document.querySelector(".slide-wrap").style.transform = 'translateX(-100vw)';
                document.querySelector(".slide-1").classList.remove("border-black");
                document.querySelector(".slide-2").classList.add("border-black");
                document.querySelector(".slide-3").classList.remove("border-black");
            } else { /* 위와 동일하게 작동 */
                count = 1;
                document.querySelector(".slide-wrap").style.transform = 'translateX(0vw)';
                document.querySelector(".slide-1").classList.add("border-black");
                document.querySelector(".slide-2").classList.remove("border-black");
                document.querySelector(".slide-3").classList.remove("border-black");
            }
        })
		document.querySelector(".next").addEventListener("click", function () { /* 다음 버튼 클릭시 */
            if (count == 1) { /* 이미지 위치가 1일떄 */
                count = 2; /* 이미지 위치를 2로 이동 */
                document.querySelector(".slide-wrap").style.transform = 'translateX(-100vw)';
                document.querySelector(".slide-1").classList.remove("border-black");
                document.querySelector(".slide-2").classList.add("border-black");
                document.querySelector(".slide-3").classList.remove("border-black");
            } else if (count == 2) { /* 위와 동일하게 작동 */
                count = 3;
                document.querySelector(".slide-wrap").style.transform = 'translateX(-200vw)';
                document.querySelector(".slide-1").classList.remove("border-black");
                document.querySelector(".slide-2").classList.remove("border-black");
                document.querySelector(".slide-3").classList.add("border-black");
            } else { /* 위와 동일하게 작동 */
                count = 1;
                document.querySelector(".slide-wrap").style.transform = 'translateX(0vw)';
                document.querySelector(".slide-1").classList.add("border-black");
                document.querySelector(".slide-2").classList.remove("border-black");
                document.querySelector(".slide-3").classList.remove("border-black");
            }
        })