자바스크립트로 슬라이드 인디케이터 indicator 구현하기 (active or forEach)

 

아래에 indecator 요소를 넣어 하나 선택시 상태값이 바뀌게 한다. 

예시로 빨갛게 색이 바뀌게 적용

 

---

기본 html 코드를 적어준후 

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

scss로 자리잡아주기 

&.active 로 색상값을 변경하고 자바스크립트로 css  요소에 접근한다 

      .slide_pagination {
        @include flex-row();
        gap: 15px;
        position: absolute;
        left: 50%;
        bottom: 50px;
        transform: translateX(-50%);

        li {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background-color: #fff;

          &.active {
            background-color: red;
          }
        }
      }

---

자바스크립트로 요소 선택 

 

 

 

//인디케이터 요소 선택
const indicatorItems = document.querySelectorAll('.slide_pagination li');
console.log('indicatorItems: ', indicatorItems);

querySelectorAll 로 document 에 접근해 .slide_pagination 이름의 li 의 태그에 모두 접근한다.

변수로 만든 indicatoritems 안에 li의 배열 3개 확인

---

 

자바스크립트 방법 1 (active 전체 지우고 한개만 적용)

active 상태를 모두에게 적용한 후 클릭시 나머지 li 에 적용된 active 요소를 삭제한다.

 

//forEach문은 for문과 달리 비동기 방식으로 에러가 나도 멈추지않고 동작

forEach 문 안에 또 forEach 문으로 함수를 만들어 active 상태를 제거 해준다. 

// 1. 인디케이터 선택 방법 - active 상태제거
indicatorItems.forEach(function (indicator) {
  indicator.addEventListener('click', function () {
    // indicator li 들의 active를 모두 제거
    
    indicatorItems.forEach(function (indicatorRemove) {
      indicatorRemove.classList.remove('active');
    });
    
    // 선택된 li만 active 추가
    indicator.classList.add('active');
  });
});

 

---

자바스크립트 방법2 (상태값을 함수에 담아 true.false 일때 active 적용)

 

active 상태 add or remove 

// 2. 인디케이터 선택 방법 -  (선호)
let beforeSelected;

//콜백함수를 if 조건을 걸어 반환한다.
indicatorItems.forEach(function (indicator) {
  indicator.addEventListener('click', function () {
    //클래스 추가 전 언디파인
    console.log('before beforeSelected: ', beforeSelected);

    // 또 선택이 되면 클릭 활성화 전으로 돌리기
    // true 이면 (값이 있으면) 코드실행
    if (beforeSelected) {
      beforeSelected.classList.remove('active');
      console.log('ifbeforeSelected: ', beforeSelected);
    }

    //클릭이 된다면 li 에 엑티브요소 추가
    indicator.classList.add('active');

    //선택전 상태 변수에 li클릭시 요소변화 담기면 true
    beforeSelected = indicator;
    console.log('after beforeSelected: ', beforeSelected);
  });
});

함수 beforeSelected 를 선언해 준후,  선택되기 전 값을 넣고 

forEach 안에서 재선택이 되어 값이 있는 (즉 true )가 되어있을때 active 를 remove 시켜 백지상태값으로 돌려준다. 

 

---

처음 li 를 클릭했을때 

beforeSelected 는 undefined 지만 

 

다른 li 를 클릭한다면 이미 다른 li 가 선택되어 값이 들어있기 때문에 

beforeSelected 가 true 로 li 가 선택이 되어있다고 나온다.

그러니 다른 active 를 지워주고 다시 부여한다

 

 

 

 

다음으로 인디케이터 요소 선택시 슬라이드 넘어 가게 만들기