[자바스크립트] 캐러셀 만들기

이런 캐러셀을 만들어 보자.

 

    <div style="overflow: hidden">
        <div class="slide-container">
            <div class="slide-box">
                <img src=car1.png>
            </div>
            <div class="slide-box">
                <img src=car2.png>
            </div>
            <div class="slide-box">
                <img src=car3.png>
            </div>
        </div>


    </div>
    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>
    <button class="next">다음</button>

 

사진을 담을 slide-container이 있고 그 안에 각각의 사진은 slide-box에 들어있다.

slide-container는 사진개수*100vm으로, 총 300vm의 너비로 설정하였고

slide-box는 각각 100vm으로, 가로로 정렬되도록 float: left로 설정하였다.

그리고 이 모든 박스를 둘러싸는 div를 만들고 style=overflow:hidden을 주어 화면 밖으로 튀어나간 부분은 안 보이도록 한다.

 

        $('.slide-2').on('click', function() {
            $('.slide-container').css('transform', 'translateX(-100vw)');
        })
        $('.slide-3').on('click', function() {
            $('.slide-container').css('transform', 'translateX(-200vw)');
        })
        $('.slide-1').on('click', function() {
            $('.slide-container').css('transform', 'translateX(-00vw)');
        })

그리고 각각의 버튼을 누를 때마다,

translateX를 이용하여 사진을 이동시키면서 해당 이미지가 보이도록 해 주면 된다.

(애니메이션은 slide-container에 transition을 주면 된다)

 

 

        var 지금사진=1;
        $('.next').on('click', function() {
            if(지금사진==1){
                $('.slide-container').css('transform', 'translateX(-100vw)');
                지금사진=2;
            }
            else if(지금사진==2){
                $('.slide-container').css('transform', 'translateX(-200vw)');
                지금사진=3;
            }
            else if(지금사진==3){
                $('.slide-container').css('transform', 'translateX(-00vw)');
                지금사진=1;
            }

다음 버튼의 경우는

현재 보고 있는 사진의 다음 사진이 나오도록 자바스크립트 작성하였다.

그런데 이렇게 if-else문을 달면 반복된 내용이 많아진다.

 

        var 지금사진 = 0;
        $('.next').on('click', function() {
            지금사진=(지금사진+1)%3;
            $('.slide-container').css('transform', 'translateX(-'+지금사진+'00vw)');

이렇게 문자열 중간에 변수를 집어넣어서 간단하게 코드를 작성할 수 있다.