캐러셀 만들기

• One-Way 방식의 설계
  • HTML, CSS 구성 시작화면
  • 최종 화면 만들기
  • JS로 제어

    <div class="slide-container">
        <div class="slide-box">
            <img src="car1.png" alt="">
        </div>
        <div class="slide-box">
            <img src="car2.png" alt="">
        </div>
        <div class="slide-box">
            <img src="car3.png" alt="">
        </div>
    </div>

.slide-container {
    width: 100vw;
    transition: all 1s;
}

• vw: 브라우저 폭 (100이 꽉찬거, 300vw는 3배로, 넘어간거)

.slide-box {
    width: 100vw;
    float: left;
}

• 잔챙이 박스들은 float으로 왼쪽 정렬

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

    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>

    <script>
        $('.slide-2').on('click', function() {
            $('.slide-container').css('transform', 'translateX(-100vw)');
        })
    </script>

• slide-container에 transform: translateX(-100vw) 속성을 부여해서 변화시킨다.

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

    <button class="slide-1">1</button>
    <button class="slide-2">2</button>
    <button class="slide-3">3</button>

    <script>
        $('.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(0)');
        })
    </script>

• 위처럼 slide에 속성을 부여하면 여러 사진으로 왔다리 갔다리가 가능하다.

<script>
        var nowImg = 1;

        $('.next').on('click', function(){
            if (nowImg == 1) {
                $('.slide-container').css('transform', 'translateX(-100vw)');
                nowImg = 2;
            } else if (nowImg == 2) {
                $('.slide-container').css('transform', 'translateX(-200vw)');
                nowImg = 3;
            } else {
                $('.slide-container').css('transform', 'translateX(0)');
                nowImg = 1;
            }
        })


        $('.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(0)');
        })
    </script>

• 위 처럼 코드를 짜면, next 버튼을 눌렀을 때, 바로 다음 slide box로 애니메이션이 발생