jQuery 를 이용한 반응형 FullPage (resize) 만들기

사용 코드

• jQuery

구현기능

• 좌우 버튼 클릭시 페이지 이동
• Dot 버튼 으로 index 를 UI 확인 가능
• Dot 버튼 클릭 시 페이지 이동
• html에 page 추가 시 동적으로 dot 버튼 변경

HTML

1. 각 페이지를 담는 wrap 페이지를 만든다.
2. 페이지를 원하는 만큼 100% 크기로 만든다.
3. 가로로 만들 경우, 각 페이지를 가로로 배치하자.
4. wrap 은 overflow:hidden, display: absoulte 하고, left 를 이동하면서 다음페이지를 보여주자.
5. 페이지를 이동할 버튼을 만들자.

JS( + resize)

1. 페이지 개수를 구한다.
   page.length
2. 각 페이지의 위치값을 배열에 넣는다.
   pagePos = [] ← for문 $(window).width()
3. 현재 페이지 인덱스를 저장한 후,
   currentPageIndex
4. 리사이징 될 때마다 위치 배열 값을 새로고침 한다.
   pagePos = [] ← for문 $(window).width() * i
5. 현재 페이지 인덱스의 위치로 옮겨 준다.
   wrap.css('left', pagePos[currentPageIndex]

Codepen

See the Pen Fullpage(resize) by 42inshin (@42inshin) on CodePen.