[jQuery]each와 attr을 이용한 dot slide

=> 버튼을 클릭하면 해당하는 버튼 순서에 맞춰 img_wrap이 이동해야 함

1. 버튼의 순서를 가져오기 위해 버튼에 순서를 부여
2. 버튼을 attr과 each를 사용하여 data-index 속성을 부여(버튼 순서 지정을 위함)
3. 클릭한 버튼이 누구인지 알아오기
4. 클릭하면 img_wrap이 -1000px만큼 이동

*attr()

=> 값을 부여할 때는 attr({})을 사용하고, 값을 얻어올 때는 attr("")을 사용

style

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

        ul, li{
            list-style: none;
        }

        .wrap{
            width: 1000px;
            height: 500px;
            position: relative;
        }

        .img_wrap{
            width: 4000px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
        }

        .bg{
            width: 1000px;
            height: 500px;
            border: 3px solid salmon;
            font-size: 50px;
        }

        .btn_wrap{
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

        .btn_wrap li{
            width: 20px;
            height: 20px;
            background-color: lightgray;
            border-radius: 50%;
            margin-right: 20px;
            cursor: pointer;
        }

        .btn_wrap li:last-child{
            margin-right: 0;
        }

script

        $(document).ready(function(){

            $('li').each(function(i){
                $(this).attr({
                    "data-index": i
                });
            }).click(function(){
                var clicked = $(this).attr("data-index");
                
                $('.img_wrap').stop().animate({
                    left: -1000 * clicked
                });
            });

        });

=> $('li').each(function(i){ $(this).attr({ "data-index": i }); }) 이 부분이
data-index라는 이름으로 each문을 사용하여 각 li태그마다 순서를 부여하는 코드이며,
이후 .click을 사용하여 클릭 이벤트를 처리함.

.click(function(){
    var clicked = $(this).attr("data-index");
    
    $('.img_wrap').stop().animate({
        left: -1000 * clicked
    });
});

이 부분을 확인해보면, data-index 값을 얻어와 clicked라는 변수에 넣어주고,
클릭할 때마다 left값을 -1000 * clicked로 바꿔줌.