TIL

• 프로젝트 초기 캐러셀
  

• HTML 코드

<main id="main">
    <div class="slider-Wrap">
<!-- 포스터 이미지 -->
      <div class="slider-Img"></div>
<!-- 썸네일 -->
      <div class="slider-Thumb"></div>
<!-- 포스터 이미지 좌,우 버튼 -->
      <div class="slider-Btn">
        <a href="#" class="pre-view" title="이전 이미지">PREV</a> <!--title은 웹 접근성을 위함임-->
        <a href="#" class="next-view" title="다음 이미지">NEXT</a>
      </div>
    </div>
    <!-- 모달창 -->
    <div class="modal">
      <div class="modal-Popup">
        <button type="button" class="close-Btn">Close</button>

      </div>
    </main>

• JS 코드

구글링과 여러 레퍼런스를 찾아가며 꾸역꾸역 작성했건만..!!!! (개발 블로그 만세)

이미지와 모달 팝업을 연결함에 있어서도 각 이미지에 따로 부여를 했어야 했는데 그 부분도 꽤나 고생했고 후에 동영상을 모달창에 연결하는 과정에서 active가 활성화 된 어느 부분에서 충돌이 일어나 계속된 시도와 여러 도움들을 받았지만..내가 이 새로 코드를 쓰는 방향으로 다시 처음부터 시작했다.

두 번째 캐러셀 디자인은 무난하게 제작하게 되었다.
포스터 이미지 호버를 통해 커서가 어디에 위치하는 지 보여줬고 드래그 기능을 넣어 버튼이 아니여도 움직일 수 있게 구현하였다.

• JS 코드
  
  

이전의 같은 문제는 없었지만 이미지와 모달 팝업 연결 함에 있어 난항이 있었고 방법으로 dataset property를 사용하여 연결하였다.

출처: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

• 다만 아쉬운 점은 한 페이지에 끌어오는 API가 4-5개 였다보니 로딩시간이 꽤나 걸려 대안으로 선택한 것이 하드코딩이였다.
  지양하는 방법이란 걸 알고 있었지만 대안이 없어 아쉬울 뿐이였다.