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

 

 

🎯 양쪽 화살표가 작동시키기

🎯 4개짜리 카드가 존재하는 FINAL 미션에선 화살표가 필요없기 때문에 나타나지 않도록 만들어주자

-> main.js의 반복문이 두번밖에 돌지 않는다.

그래서 첫번째 위치하는 계급미션에서는 화살표가 사라지지만, 아래에 위치한 video-list에서는 사라지지 않는 것이다.

 

=> 비동기적 문제일까? 

 

 

slide-prev.parentElement = arrow-container

slide-prev.parentElement.parentElement = mission-title-container

slide-prev.parentElement.parentElement.nextElementSivbling = video-list

 

function transformNext(event) {
  const slideNext = event.target;
  const slidePrev = slideNext.previousElementSibling;

  const videoList = slideNext.parentElement.parentElement.nextElementSibling;
  let activeLi = videoList.getAttribute("data-position")
  const liList = videoList.getElementsByTagName('li');
  // liList = video-card
  

  //카드들이 오른쪽으로 이동가능 한 경우
  if(Number(activeLi) < 0) {
    activeLi = Number(activeLi) + 260;
    //video-card width: 240px + margin: 20px
    
    // 왼쪽에 있던 카드가 오른쪽으로 이동했다면, 다시 왼쪽으로도 갈 수 있으니깐 prev버튼 활성화
    slidePrev.style.color = '#2f3059'; //활성화
    slidePrev.videoList.add('slide-prev-hover');
    slidePrev.addEventListener('click', transformPrev);
    
    // 맨 왼쪽에 보이는 카드가 첫번째 카드라면, next버튼은 비활성화 되어야 함
    if (Number(activeLi) === 0 ) {
      slideNext.style.color = '#cfd8dc';  //비활성화
      slideNext.videoList.remove('slide-next-hover');
      slideNext.removeEventListener('click', transformNext);
    }
  }

  videoList.style.transition = 'transform 1s';
  videoList.style.tranform = 'translateX(' + String(activeLi) + 'px)';
  videoList.setAttribute('data-position', activeLi)
}

 

💣문제점 발견

 

왼쪽과 오른쪽 padding값을 똑같이 주었음에도 불구하고 오른쪽에 보면 video-card가 나와있다.

 

 

🌈해결

<수정 전>

.video-list{
    display: flex;
    list-style: none;
    padding: 1.5rem 0;
    margin: 0;
    overflow: none;
}

<수정 후>

.video-list{
    display: flex;
    list-style: none;
    padding: 1.5rem 0;
    margin: 0;
    overflow: hidden;
}

overflow 값이 none으로 설정되어있었다... 왜 그랬지...