<path d="M11.5,5 C17.293,5 20.813,11.041 20.918,11.298 L20.918,11.298 L21,11.5 L20.918,11.701 C20.813,11.959 17.293,18 11.5,18 C5.707,18 2.187,11.959 2.082,11.701 L2.082,11.701 L2,11.5 L2.082,11.298 C2.187,11.041 5.707,5 11.5,5 Z M11.5,6.036 C6.92,6.036 3.565,10.488 3.089,11.499 C3.567,12.51 6.932,16.964 11.5,16.964 C16.08,16.964 19.435,12.512 19.911,11.5 C19.433,10.49 16.068,6.036 11.5,6.036 Z M11.5,8.25 C13.2949254,8.25 14.75,9.70507456 14.75,11.5 C14.75,13.2949254 13.2949254,14.75 11.5,14.75 C9.70507456,14.75 8.25,13.2949254 8.25,11.5 C8.25,9.70507456 9.70507456,8.25 11.5,8.25 Z M11.5,9.25 C10.2573593,9.25 9.25,10.2573593 9.25,11.5 C9.25,12.7426407 10.2573593,13.75 11.5,13.75 C12.7426407,13.75 13.75,12.7426407 13.75,11.5 C13.75,10.2573593 12.7426407,9.25 11.5,9.25 Z" id="Color" /> Show <path d="M9.48,11.45l-4,2.88a0.84,0.84,0,0,1-1.34-.65V11.45H2.22A1.7,1.7,0,0,1,.5,9.79V2.17A1.7,1.7,0,0,1,2.22.5H14.78A1.7,1.7,0,0,1,16.5,2.17V9.79a1.7,1.7,0,0,1-1.72,1.67H9.48Z" transform="translate(0 0)" fill="none" />
👻서론퍼블리셔 포트폴리오 사이트에 들어간 슬라이드입니다. 기능을 설명하자면..
정도가 되겠습니다. 이것도 저번 포스트처럼 codepen에 간단한 데모버전을 만들었습니다. 코드펜에 작성한 내용을 바탕으로 설명하겠습니다. 👻HTML
갤러리 썸네일 li 요소에 앵커로 이미지 원본(큰 사진) 주소를 걸어주고 👻CSSslide
길어서 중요한 슬라이드 부분만! 👻javaScript썸네일을 눌렀을 때 팝업창이 등장하는 함수&이미지 주소 연결
이미지 개수만큼 버튼(bullet)을 생성하는 함수
1. 버튼들을 담을 ul 요소 생성
2. 이미지의 개수만큼 버튼을 생성
슬라이드 버튼 클릭 이벤트
모든 bullet의 on 클래스를 삭제
해당하는 bullet에 on 클래스 넣기
💖bullet을 클릭하면 해당하는 번호의 이미지로 슬라이드 되는 함수
기본 이벤트 삭제
클릭된 bullet의 index를 변수로 설정
헷갈려서 변수 할당해줌 현재 bullet과 클릭된 bullet의 인덱스의 차이를 이용하기
뜬끔없이 이 둘의 인덱스의 차이를 구하냐면 인덱스의
차이만큼 슬라이드들을 분리시켜서 이동-삽입할 거기 때문입니다. 아래에 예시로 현재 요소보다 뒤에 있는 요소로 갈 경우의 설계도를 그렸습니다.
먼저 선택한 bullet에 클래스가 들어가는 코드를 짰습니다.
💜step이 양수일 경우(현재보다 뒤에 있는 요소로 이동)
step 값 기준으로 배열의 원소들을 잘라내는 과정을 거치기 위해 slice() 메서드를 사용했습니다.
💜step이 음수일 경우(현재보다 앞에 있는 요소로 이동)원리는 위와 같습니다.
썸네일을 클릭하면 해당하는 이미지가 띄워지는 함수
bullet을 클릭하면 해당하는 번호의 이미지로 슬라이드 되는 함수와 같은 원리입니다. 👻마치며생각보다 고려해야할 점들도 많았고.. 제이쿼리의 eq()를 어떻게 구현할까 많은 고민을 했습니다. |