8.모달 프로젝트

아까 필터 프로젝트에서 카드의 내용을 클릭하면

해당하는 카드의 이미지부터 시작되는 슬라이드 모달 창을 만드는 프로젝트

꽤나 까다로웠다.

우선 이미지 클론생성하여 슬라이드에 appendchild()를 이용하여 연결해서 슬라이드를 생성한 후,

클릭하는 카드의 이미지 (target)을 기준으로 정렬이 되어 바로 해당이미지가 보여지도록하고

그 다음에는 늘 만들던 슬라이드 코딩방식으로 제작함!

 

forEach를 사용해서 각 인덱스에 해당하는 이미지를 클론생성해서 slides목록에 연결시켜줌!

그리고 클릭하면 모달창이 뜨고, 엑스버튼(close)를 누르면 모달창이 없어지게 설계!

 

클릭하는 이미지의 인덱스 번호(target의 인덱스번호) 만큼 left값에 변화를 주어서 슬라이드 이동시킨채로 모달창이 뜨도록 설계함.