[jQuery]슬라이드(slide)

body

    <div class="wrap">

        <div class="img_wrap">
            <div class="img"></div>
            <div class="img"></div>
            <div class="img"></div>
        </div>

        <div class="arrow left_arrow"> &lt; </div>
        <div class="arrow right_arrow"> &gt; </div>

    </div>

style

        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .wrap{
            width: 600px;
            height: 400px;
            margin: 100px auto;
            border: 10px solid black;
            position: relative;
            overflow: hidden;
        }

        .img_wrap{
            width: 1800px;
            /* height: inherit; */
            height: 100%;
            background-color: lightgray;
            display: flex;
            position: absolute;
            top: 0;
            left: 0;
            transition: 0.5s;
        }

        .img{
            width: 600px;
            height: 100%;
        }

        .img:nth-child(1){
            background: url(https://static.vecteezy.com/system/resources/previews/002/037/924/non_2x/abstract-blue-background-with-beautiful-fluid-shapes-free-vector.jpg) no-repeat center / cover;
        }

        .img:nth-child(2){
            background: url(https://img.freepik.com/premium-vector/modern-vector-graphic-abstract-backgorund_600800-1752.jpg) no-repeat center / cover;
        }

        .img:nth-child(3){
            background: url(https://static.vecteezy.com/system/resources/thumbnails/004/968/002/small/cute-abstract-modern-background-free-vector.jpg) no-repeat center / cover;
        }

        .arrow{
            position: absolute;
            font-size: 50px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }

        .left_arrow{
            left: 30px;
        }

        .right_arrow{
            right: 30px;
        }

=>img 하나의 가로값이 600px으로 뒀을 때,
현재 3개의 img가 있기 때문에 전체적인 가로값은 1800px이 된다.
그러므로 img 세 개를 감싸고 있는 부모인 img_wrap에 가로값을 1800px로 측정했다.
여기서 다시 img_wrap을 감싸고있는 부모인 wrap에 600px의 가로값을 준 이유는
overflow: hidden을 사용하여 img_wrap에 들어가있는 img들이 한 번에 보이게 하는 것을 방지하기 위함이다.
img의 가로값이 600px이니 overflow: hidden을 사용하게 된다면 결국 화면에는 하나의 이미지만 보일 수 있게 된다.

아래의 click event를 left값 조절로 할 것이기 때문에 해당 값으로 조절할 수 있도록
img_wrap에 꼭 position이 들어가야 한다.

*background축약

=> background: 컬러 이미지경로 반복 위치 / 크기;

script

        $(document).ready(function(){

            var arrowClick = 0;

            $('.right_arrow').click(function(){
                if(arrowClick === 0){
                    $('.img_wrap').css({
                        left: "-600px"
                    });
                    arrowClick++;
                } else if(arrowClick === 1){
                    $('.img_wrap').css({
                        left: "-1200px"
                    });
                    arrowClick++;
                } else if(arrowClick === 2){
                    $('.img_wrap').css({
                        left: 0
                    });
                    arrowClick = 0;
                };
            });

            $('.left_arrow').click(function(){
                if(arrowClick === 0){
                    $('.img_wrap').css({
                        left: "-1200px"
                    });
                    arrowClick = 2;
                } else if(arrowClick === 2){
                    $('.img_wrap').css({
                        left: "-600px"
                    });
                    arrowClick--;
                } else if(arrowClick === 1){
                    $('.img_wrap').css({
                        left: 0
                    });
                    arrowClick--;
                }
            });

        });

=> 오른쪽 화살표를 right_arrow, 왼쪽 화살표를 left_arrow로 뒀을 때,
각 선택자를 클릭할 때마다 event 처리를 해주었다.

우선, arrowClick이라는 변수에 0을 두고
클릭을 할 때마다 arrowClick에 값을 증가 혹은 감소시킨다.

이 때, right_arrow 클릭 시 arrowClick 값이 2인 경우에는 다시 값을 0으로 변경시켜주며
left 값도 0으로 주어 첫 번째 img가 보이도록 만들어준다.
반대로 left_arrow를 클릭할 때에 arrowClick 값이 0인 경우,
left 값을 -1200px로 주며 arrowClick 값을 2로 변경시켜 마지막 img가 보이도록 만들어준다.

하지만 위의 방법은 코드가 길어지고, img가 추가될 수록 수정해야하는 부분이 많아진다는 단점이 있어
이를 보완하기 위하여 다른 방법을 모색해보았다.

script

        $(document).ready(function(){

            var num = 0;
            
            $('.right_arrow').click(function(){
                num++;
                if(num > 2){
                    num = 0;
                }
                
                $('.img_wrap').stop().animate({
                    left: -600 * num
                });
            });

            $('.left_arrow').click(function(){
                num--;
                if(num < 0){
                    num = 2;
                }
                $('.img_wrap').stop().animate({
                    left: -600 * num
                });
            });

        })

=> 이 코드가 첫 번째 코드의 단점을 보완한 코드이다.
우선 여기서는 위 코드의 arrowClick같은 역할로 num이라는 변수에 0을 넣어준다.
그리고 click 이벤트가 발생할 때마다 num에 수를 증감시켰다.

다만 if문의 조건을 다르게 걸었는데,
right_arrow를 클릭하여 이벤트가 발생했을 때의 num이 2를 초과한 경우에만 num 값을 0으로 되돌린다.
그리고 animate를 사용하여 left값에 -600 * num을 넣어줌으로서
num이 0인 경우 left 값이 0, 1인 경우 -600, 2인 경우 -1200 이 들어가게 된다.
left_arrow를 클릭하여 이벤트가 발생했을 때에 num이 사용되는 것은 똑같으나,
num이 0 미만으로 내려가는 경우에만 다시 2로 되돌려주게 만들었다.

여기서 $(선택자).stop().animate({});를 사용한 이유는
.stop()을 animate와 묶어 사용함으로서 의미없는 delay를 줄여주기 위해 사용하였다.