캐러셀 슬라이드(근데 이제 translate 를 곁들인)

* 공부 및 자격증을 위해 작성하는 글입니다.

* 부족한 내용이나 틀린 내용을 알려주시면 감사합니다.

* 코딩애플 js 강의를 참고하여 기능을 연습했습니다.

---

 

예전에 margin-left를 이용한 슬라이드(캐러셀)을 배운적이 있었다.

그런데 translate를 이용해야 애니메이션 기능을 만들때 더욱 부드럽게 작용한다고 한다.

 

실제로 이번에 다시 기능 복습하면서 캐러셀을 margin-left를 사용해서 만들었었는데

PC에선 괜찮았지만 모바일에서는 '다음' 버튼을 처음 화면에서 누를 때마다 캐러셀 넘김이 뚝뚝 끊겼다.

translate로 다시 만드니 이 부분은 해결됐다.

 

 

1번째 박스

2번째 박스

3번째 박스

 

버튼 부분은 ul과 li로 만드는게 더 깔끔해 보이지만, button으로도 만들어봤다.

 

 

코드

<!-- css -->
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .clearFix::after {
        content: '';
        display: block;
        clear: both;
    }

    .slide_wrap {
        overflow: hidden;
        width: 300px;
        margin-bottom: 5px;
    }

    .slide_container {
        width: 300%;
        transition: all 1s;
    }

    .slide_box {
        width: 33.333333%;
        height: 180px;
        float: left;
        text-align: center;
        line-height: 180px;
    }

    .slide_box:nth-child(1) {
    	background-color: #c3e2dc;
    }

    .slide_box:nth-child(2) {
    	background-color: #ebf3ef;
    }

    .slide_box:nth-child(3) {
    	background-color: #fae18d;
    }
    
    .s_btn {
        width: 56.5px;
        height: 25px;
        border: 1px solid #eee;
        background-color: #eee;
        cursor: pointer;
    }
</style>


<!-- html -->
<div class="slide_wrap">
    <div class="slide_container clearFix">
        <div class="slide_box">1번째 박스</div>
	<div class="slide_box">2번째 박스</div>
        <div class="slide_box">3번째 박스</div>
    </div>
</div>

<button type="button" class="slide_prev s_btn">이전</button>
<button type="button" class="slide_1 s_btn">1</button>
<button type="button" class="slide_2 s_btn">2</button>
<button type="button" class="slide_3 s_btn">3</button>
<button type="button" class="slide_next s_btn">다음</button>


<!-- js -->
<script>
    var slide_1 = document.querySelector('.slide_1');
    var slide_2 = document.querySelector('.slide_2');
    var slide_3 = document.querySelector('.slide_3');
    var slide_prev = document.querySelector('.slide_prev');
    var slide_next = document.querySelector('.slide_next');
    var slideContainer = document.querySelector('.slide_container');

    // 번호를 누르면 해당 순번의 박스가 보여짐
    slide_1.addEventListener('click', function(){
    	slideContainer.style.transform = "translateX(0%)";
    });

    slide_2.addEventListener('click', function(){
    	slideContainer.style.transform = "translateX(-33.333333%%)";
    });

    slide_3.addEventListener('click', function(){
    	slideContainer.style.transform = "translateX(-66.666666%)";
    });
    
    // 이전 or 다음 버튼 누르면 현재 박스에서 해당 방향 박스로 슬라이드 넘어감
    var slideNumber = 0;
    slide_prev.addEventListener('click', function(){
        if(slideNumber == 0){
            slideNumber = 2;
        }

        else {
            slideNumber--;
        }
        
        slideMove();
    });

    slide_next.addEventListener('click', function(){
        if(slideNumber == 2){
            slideNumber = 0;
        }

        else {
            slideNumber++;
        }

        slideMove();
    });

    // 반복되는 코드라서 slideMove 함수에 넣어줌
    function slideMove(){
    	slideContainer.style.transform = "translateX(-" + 33.333333 * slideNumber + "%)";
    }
</script>