<SWF> 반응형 웹페이지 만들기 (3)

다음으로 해당 아이콘에 js기능을 추가해주려고 한다.

1. 나열된 카드들이 화면 크기를 넘어갈 경우에만 해당 아이콘 표시
2. 왼쪽으로 카드들이 이동 가능할 경우에는 왼쪽 버튼 활성화, 오른쪽으로 이동 가능할 경우에는 오른쪽 버튼 활성화

 

<<main.js>>

let videoList = slidePrevList[i].parentElement.parentElement.nextElementSibling;

videoList에 ul태그를 담기 위해 앞서 정의한 slidePrevList로부터 ul 태그가 있는 부분을 가리켜야 한다.

slidePrevList.parentElement = 빨간색 박스

slidePrevList.parentElement.parentElement = 파란색 박스

slidePrevList.parentElement.parentElement.NextElementSibling = 초록색 박스

 

if(videoList.clientWidth < liList.length * 260){

    slidePrevList[i].classList.add('slide-prev-hover');

    slidePrevList[i].addEventListener('click', transformPrev);

  }

videoList.clientWidth < liList.length * 260 : 카드가 넘칠 경우

여기서 260이란 값은 margin을 포함한 각 li 요소(class = 'video-card')들의 실질적인 너비

slidePrevList[i].classList.add('slide-prev-hover');

왼쪽으로 갈 수 있는 버튼(Prev)은 활성화 해준다.

slide-prev-hover이라는 새로운 클래스를 추가해주므로 css에서 새롭게 정의해줘야 한다.

나중에 있을 slide-next-hover클래스도 같이 정의

slidePrevList[i].addEventListener('click', transformPrev);

slide-prev버튼을 click했을 때 카드들이 움직이도록 함수 지정 (transformPrev함수)

 

else{

    const arrowContainer = slidePrevList[i].parentElement;

    arrowContainer.removeChild(slidePrevList[i].nextElementSibling); // >(NEXT) 버튼

    arrowContainer.removeChild(slidePrevList[i]); // <(PREV) 버튼

  }

태그를 삭제할 경우 부모요소에서 removeChild를 통해 삭제해야한다.

-> 1. 부모 요소 찾아서 2. 부모 요소의 자식요소로 있는 PREV와 NEXT 삭제