[jQuery]addClass와 removeClass를 활용한 Dot Slide

=> 이전 dot slide에서 눌려진 버튼에 색이 들어오는 기능을 추가했음.

body

    <div class="wrap">

        <div class="img_wrap">
            <div class="bg">1</div>
            <div class="bg">2</div>
            <div class="bg">3</div>
            <div class="bg">4</div>
        </div>

        <ul class="btn_wrap">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>

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 .bg_active{
            background-color: crimson;
        }

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

=> addClass와 removeClass 사용을 위해 .bg_active를 추가

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').removeClass("bg_active");
                // $(this).addClass("bg_active");
                $('li').eq(clicked).addClass("bg_active");
                
            });

        });

=> 앞에서 만들었던 dot slide와 동일하지만, 버튼을 누를 때마다 색상을 변경하기 위한 코드가 추가되었음.
클릭 이벤트 발생 시, $('li').removeClass("bg_active");를 이용하여 모든 li태그의 bg_active 스타일을 삭제함
이후, $(this).addClass("bg_active"); 또는 $('li').eq(clicked).addClass("bg_active");를 사용하여
현재 클릭된 순서의 li태그에 bg_active 클래스를 추가해주며 background-color에 crimson색상을 추가

=> 부정적인 것은 항상 위, 긍정적인 것(보여야 할 것)은 항상 아래

*위 슬라이드 내부에 타이틀을 넣어 opacity로 효과 넣어보기

body 위와 같으나 title 클래스를 추가, 버튼 역할의 li태그 첫 번째에 bg_active 추가

      <ul class="btn_wrap">
        <li class="bg_active"></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>

      <div class="text_wrap">
        <div class="title title_1 title_active">TITLE 01</div>
        <div class="title title_2">TITLE 02</div>
        <div class="title title_3">TITLE 03</div>
        <div class="title title_4">TITLE 04</div>
      </div>
    </div>

=> 첫 번째 li와 첫 번째 title에 active를 기본적으로 넣어준 이유는,
제일 처음 첫 번째 title을 보여주며 첫 slide임을 알려주기 위함.

style 위와 같으나 title부분의 코드 추가

      .text_wrap {
        width: 250px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 50px;
        font-weight: 900;
        text-align: center;
      }

      .title {
        width: 100%;
        position: absolute;
        top: 50px;
        left: 0;
        opacity: 0;
        transition: 0.2s;
      }

      .title_active {
        opacity: 1;
        top: 0;
      }

script에는 2가지 방법으로 title의 효과를 구현해볼 수 있었는데,
(1)

        $("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").removeClass("bg_active");
            $("li").eq(clicked).addClass("bg_active");

            $(".title").removeClass("title_active");
            $(`.title`).eq(clicked).addClass("title_active");
          });

=> 이렇게 버튼을 클릭했을 때와 똑같이, eq선택자를 활용하는 경우가 첫 번째 방법

(2)

        $("li").each(function (i) {
            $(this).attr({
              "data-index": i,
            });
          }).click(function () {
            var clicked = $(this).attr("data-index");
            var num = Number(clicked) + 1 ;

            $(".img_wrap").stop().animate({
                left: -1000 * clicked,
              });

            $("li").removeClass("bg_active");
            $("li").eq(clicked).addClass("bg_active");

            $(".title").removeClass("title_active");
            $(`.title_${num}`).addClass("title_active");
          });

=> 두 번째 방법은 조금 더 복잡한데,
var num = Number(clicked) + 1 ;
위처럼 문자로 나오는 clicked 값을 Number()을 이용하여 숫자로 변환 후 1을 더해 num에 값을 넣어주고,
(1을 더해주는 이유는 클래스 명을 title_1부터 시작했기 때문)

$(`.title_${num}`).addClass("title_active");

이 num값을 클래스명에 바로 넣어주며 addClass를 사용해 title_active를 넣어주었다.