``` - `resetSliders`: (기본값 `false`). [fullpage.js 확장 프로그램](http://alvarotrigo.com/fullPage/extensions/). 구역을 떠난 후 모든 슬라이더가 제자리로 돌아가도록 할지를 정의합니다. fullpage.js 버전이 2.8.3 이상이어야 합니다. - `fadingEffect`: (기본값 `false`). [fullpage.js 확장 프로그램](http://alvarotrigo.com/fullPage/extensions/). 기본설정인 스크롤 효과 대신 사라지는 효과를 쓸지를 정의합니다. `true`, `false`, `sections`, `slides` 값이 가능합니다. 그러므로 수직이나 수평 또는 수직 수평이 동시에 적용되는 것만 가능합니다. fullpage.js 버전이 2.8.6 이상이어야 합니다. - `animateAnchor`: (기본값 `true`) 앵커(#)가 주어질 때 웹사이트를 불러오면 애니메이션이 들어간 스크롤 형태로 목적지로 이동할지, 아니면 주어진 구역에서 바로 불러올지를 정의합니다. - `recordHistory`: (기본값 `true`) 웹사이트 상태를 브라우저 방문 기록에 맞게 밀지를 정의합니다. `true`로 설정되면 웹사이트의 각 구역/슬라이드가 새로운 페이지가 되어 브라우저의 뒤로 가기/앞으로 가기 버튼을 누르면 구역/슬라이드를 스크롤하여 웹사이트의 이전 방문 페이지나 다음 페이지로 이동합니다. `false`로 설정되면 URL이 계속 바뀌어도 브라우저 방문 기록에 아무런 영향을 미치지 않습니다. `autoScrolling:false`값을 쓰면 이 옵션이 자동으로 꺼집니다. - `menu`: (기본값 `false`) 선택자를 써서 구역에 링크할 메뉴를 구체적으로 정할 수 있습니다. 이렇게 하면 `active` 클래스를 써서 구역을 스크롤할때 메뉴에 있는 대응하는 요소가 활성화됩니다. 이렇게 하면 메뉴를 만드는 것이 아니라 `active` 클래스를 대응하는 앵커 링크와 함께 주어진 메뉴에 있는 요소에 추가만 합니다. 구역에 메뉴 요소의 링크를 걸기 위해서는 구역 안에서 사용된 것과 동일한 앵커 링크와 함께 사용하기 위해 HTML 5 데이터-태크(`data-menuanchor`)가 필요합니다. 다음은 예시입니다. ```html

``` ```javascript new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], menu: '#myMenu' }); ``` **주의:** `css3:true`를 쓸 때 문제가 생기지 않도록 하려면 메뉴 요소를 전체 페이지 포장 밖에 두셔야 합니다. 그렇지 않으면 플러그인 자체가 메뉴 요소를 `body`에 덧붙여 버립니다. - `navigation`: (기본값 `false`) `true`로 설정되면 작은 원으로 이루어진 이동 막대기가 나타납니다. - `navigationPosition`: (기본값 `none`) `left`나 `right`로 설정될 수 있습니다. (만약 쓰실 경우) 이동 막대기가 보여지는 위치를 정의합니다. - `navigationTooltips`: (기본값 []) 이동 원을 쓰시는 경우 보여질 말풍선 위젯을 정의합니다. 다음은 예시입니다. `navigationTooltips: ['firstSlide', 'secondSlide']`. 원하신다면 구역마다 `data-tooltip` 속성을 쓰셔서 정의할 수 있습니다. - `showActiveTooltip`: (기본값 `false`) 수직으로 이동할때 능동적 구역 보기를 위해 계속 따라다니는 말풍선 위젯을 보여줍니다. - `slidesNavigation`: (기본값 `false`) `true`로 설정되면 웹사이트에서 각 수평방향 슬라이더마다 작은 원으로 이루어진 이동 막대기를 보여줍니다. - `slidesNavPosition`: (기본값 `bottom`) 수평방향 이동 막대기 슬라이더 위치를 지정합니다. `top`과 `bottom`을 값으로 인정합니다. 상부 또는 하부에서의 거리와 색깔 등 다른 모든 스타일을 정의하려면 CSS 스타일을 수정하시면 됩니다. - `scrollOverflow`: (기본값 `false`) 컨텐츠가 구역/슬라이드의 높이보다 더 큰 경우 스크롤을 만들지 여부를 정의합니다. `true`로 설정되면 컨텐츠가 플러그인으로 포장됩니다. 위임을 하거나 `afterRender` 콜백에 있는 다른 스크립트를 불러오시는 걸 고려해 보세요. `true`로 설정하시는 경우 [`scrolloverflow.min.js`](https://github.com/alvarotrigo/fullPage.js/tree/master/vendors/scrolloverflow.min.js) 벤더 라이브러리가 필요합니다. 이 파일은 fullPage.js 플러그인 이전에 불러와야 합니다 하지만 jQuery (사용하시는 경우) 후에. 다음은 예시입니다. ```html ``` 특정 구역이나 슬라이드에서 fullpage.js의 스크롤 막대기를 생성하고 싶지 않으시다면 `fp-noscroll` 클래스를 쓰세요. 예시: `

` 구역 요소에서 `fp-auto-height-responsive`를 쓰시면 반응형 모드에서는 scrolloverflow가 적용되지 않습니다. - `scrollOverflowReset`: (기본값 `false`) [fullpage.js 확장 프로그램](http://alvarotrigo.com/fullPage/extensions/). `true`로 설정되면 다른 수직 구역으로 옮겨갈 때 구역/슬라이드의 컨텐츠를 스크롤 막대기와 함께 위로 스크롤합니다. 이렇게 하면 구역/슬라이드 아래에서 스크롤하더라도 언제나 컨텐츠 처음 부분을 볼 수 있습니다. - `scrollOverflowOptions`: scrollOverflow:true를 쓰시면 fullpage.js가 [iScroll.js 라이브러리](https://github.com/cubiq/iscroll/)의 포크(forked) 및 수정 버전을 사용합니다. iScroll.js 옵션을 fullpage.js에게 주시면 스크롤 행위를 맞춤화하실 수 있습니다. 더 자세한 정보를 알고 싶으시다면 [기록 문서](http://iscrolljs.com/)를 방문해 보세요. - `sectionSelector`: (기본값 `.section`) 플러그인 구역에 쓰이는 Javascript 선택자를 정의합니다. fullpage.js와 동일한 선택자를 쓰는 다른 플러그인과 문제를 일으키지 않도록 가끔 변경해야 할 수도 있습니다. - `slideSelector`: (기본값 `.slide`) 플러그인 슬라이드에 쓰이는 Javascript 선택자를 정의합니다. fullpage.js와 동일한 선택자를 쓰는 다른 플러그인과 문제를 일으키지 않도록 가끔 변경해야 할 수도 있습니다. - `responsiveWidth`: (기본값 `0`) 픽셀로 정의된 폭 아래에 정상 스크롤(`autoScrolling:false`)을 씁니다. 사용자가 자신만의 반응형 CSS에 쓰고 싶은 경우를 위해 `fp-responsive` 클래스가 바디 태그에 추가됩니다. 예를 들어 900에 설정되는 경우 브라우저의 너비가 900 미만이 될 때마다 플러그인이 정상 웹사이트처럼 스크롤됩니다. - `responsiveHeight`: (기본값 `0`) 픽셀로 정의된 높이 아래에 정상 스크롤(`autoScrolling:false`)을 씁니다. 사용자가 자신만의 반응형 CSS에 쓰고 싶은 경우를 위해 `fp-responsive` 클래스가 바디 태그에 추가됩니다. 예를 들어 900에 설정되는 경우 브라우저의 높이가 900 미만이 될 때마다 플러그인이 정상 웹사이트처럼 스크롤됩니다. - `responsiveSlides`: (기본값 `false`) [fullpage.js 확장 프로그램](http://alvarotrigo.com/fullPage/extensions/). `true`로 설정될 경우 반응형 모드가 실행되면 슬라이드가 수직 구역으로 바뀝니다. (위에 상세히 설명된 `responsiveWidth` 또는 `responsiveHeight` 옵션을 써서 구현됩니다). fullpage.js 버전이 2.8.5 이상이어야 합니다. - `parallax`: (기본값 `false`) [fullpage.js 확장 프로그램](http://alvarotrigo.com/fullPage/extensions/). 구역 / 슬라이드에서 패럴랙스 배경 효과를 쓸지 여부를 정의합니다. [패럴랙스 옵션을 어떻게 적용하는지 읽어보세요](https://github.com/alvarotrigo/fullPage.js/blob/master/lang/korean/parallax-extension.md). - `parallaxOptions`: (기본값: `{ type: 'reveal', percentage: 62, property: 'translate'}`). parallax:true 옵션을 쓰실 때 패럴랙스 배경 효과 매개변수를 설정하실 수 있습니다. [패럴랙스 옵션을 어떻게 적용하는지 읽어보세요](https://github.com/alvarotrigo/fullPage.js/blob/master/lang/korean/parallax-extension.md). - `lazyLoading`: (기본값 `true`) 기본 설정으로 지연 로딩이 활성화됩니다. [지연 로딩 문서](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EC%A7%80%EC%97%B0-%EB%A1%9C%EB%94%A9)에 자세히 설명된 대로 `data-src` 속성을 지닌 모든 미디어 요소를 지연 로딩합니다. 이외 다른 지연 로딩 라이브러리를 쓰고 싶으시다면 이 fullpage.js 기능을 비활성화하실 수 있습니다. ## 방법 어떻게 작동하는지 [여기](http://alvarotrigo.com/fullPage/examples/methods.html)서 보실 수 있습니다. ### getActiveSection [데모](https://codepen.io/alvarotrigo/pen/VdpzRN/) 활성화된 슬라이드 및 슬라이드 특성이 들어간 객체(type [Section](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#callbacks))를 얻습니다. ```javascript fullpage_api.getActiveSection(); ``` ### getActiveSlide [데모](https://codepen.io/alvarotrigo/pen/VdpzRN/) 활성화된 구역 및 구역 특성이 들어간 객체(type [Slide](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#callbacks))를 얻습니다. ```javascript fullpage_api.getActiveSlide(); ``` ### moveSectionUp() [데모](http://codepen.io/alvarotrigo/pen/GJXNMN) [데모](http://codepen.io/alvarotrigo/pen/GJXNMN) 한 구역 위로 스크롤합니다. ```javascript fullpage_api.moveSectionUp(); ``` --- ### moveSectionDown() [데모](http://codepen.io/alvarotrigo/pen/jPvVZx) 한 구역 아래로 스크롤합니다. ```javascript fullpage_api.moveSectionDown(); ``` --- ### moveTo(구역, 슬라이드) [데모](http://codepen.io/alvarotrigo/pen/doqOmY) 페이지를 주어진 구역과 슬라이드로 스크롤합니다. 기본 설정으로 보이는 첫번째 페이지가 색인 0이 됩니다. ```javascript /*`firstSlide` 앵커 링크가 있는 구역과 두번째 슬라이드로 스크롤하기 */ fullpage_api.moveTo('firstSlide', 2); ``` ```javascript //웹사이트의 세번째 구역으로 스크롤하기 fullpage_api.moveTo(3, 0); //이는 다음과 동일 fullpage_api.moveTo(3); ``` --- ### silentMoveTo(구역, 슬라이드) [데모](http://codepen.io/alvarotrigo/pen/doqOeY) [`moveTo`](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#moveto%EA%B5%AC%EC%97%AD-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C)와 완전히 동일하지만, 이 경우에는 애니메이션 없이 스크롤 기능을 수행합니다. 목적지로 바로 건너뜁니다. ```javascript /*`firstSlide` 앵커 링크가 있는 구역과 두번째 슬라이드로 스크롤하기 */ fullpage_api.silentMoveTo('firstSlide', 2); ``` --- ### moveSlideRight() [데모](http://codepen.io/alvarotrigo/pen/Wvgoyz) 현 구역의 수평 슬라이더를 다음 슬라이드로 스크롤합니다. ```javascript fullpage_api.moveSlideRight(); ``` --- ### moveSlideLeft() [데모](http://codepen.io/alvarotrigo/pen/gpdLjW) 현 구역의 수평 슬라이더를 이전 슬라이드로 스크롤합니다. ```javascript fullpage_api.moveSlideLeft(); ``` --- ### setAutoScrolling(불리언) [데모](http://codepen.io/alvarotrigo/pen/rVZWrR) 스크롤 환경설정을 실시간으로 설정합니다. 페이지의 스크롤 행위 방식을 정의합니다. `true`로 설정되면 "자동" 스크롤을 쓰고, 이외의 경우에는 웹사이트의 "수동"이나 "정상" 스크롤을 씁니다. ```javascript fullpage_api.setAutoScrolling(false); ``` --- ### setFitToSection(불리언) [데모](http://codepen.io/alvarotrigo/pen/GJXNYm) `fitToSection` 옵션값을 설정하여 구역을 화면 안에 맞출지 여부를 정합니다. ```javascript fullpage_api.setFitToSection(false); ``` --- ### fitToSection() [데모](http://codepen.io/alvarotrigo/pen/JWWagj) 가장 가까운 활성화된 구역으로 스크롤하여 구역을 모바일 지원(viewport)에 맞춥니다. ```javascript fullpage_api.fitToSection(); ``` --- ### setLockAnchors(불리언) [데모](http://codepen.io/alvarotrigo/pen/yNxVRQ) `lockAnchors` 옵션값을 설정하여 앵커가 URL 안에서 효과를 낼지 여부를 설정합니다. ```javascript fullpage_api.setLockAnchors(false); ``` --- ### setAllowScrolling(불리언, [방향]) [데모](http://codepen.io/alvarotrigo/pen/EjeNdq) 마우스 휠/트랙패드나 터치 제스처(기본 설정으로 활성화됨)로 구역/슬라이드를 통과하는 스크롤 가능성을 넣거나 없앱니다. `setKeyboardScrolling`을 쓰셔야 합니다. - `directions`: (선택 가능한 매개변수) 인정되는 값: `all`, `up`, `down`, `left`, `right` 또는 이들을 조합하되 `down, right`처럼 쉼표로 분리. 스크롤이 활성화되거나 비활성화될 방향을 정의합니다. ```javascript //스크롤 비활성화 fullpage_api.setAllowScrolling(false); //아래 방향 스크롤 비활성화 fullpage_api.setAllowScrolling(false, 'down'); //아래 및 오른쪽 방향 스크롤 비활성화 fullpage_api.setAllowScrolling(false, 'down, right'); ``` --- ### setKeyboardScrolling(불리언, [방향]) [데모](http://codepen.io/alvarotrigo/pen/GJXNwm) 키보드(기본 설정으로 활성화됨)로 구역을 통과하는 스크롤 가능성을 넣거나 없앱니다. - `directions`: (선택 가능한 매개변수) 인정되는 값: `all`, `up`, `down`, `left`, `right` 또는 이들을 조합하되 `down, right`처럼 쉼표로 분리. 스크롤이 활성화되거나 비활성화될 방향을 정의합니다. ```javascript //모든 키보드 스크롤 비활성화 fullpage_api.setKeyboardScrolling(false); //키보드 아래 방향 스크롤 비활성화 fullpage_api.setKeyboardScrolling(false, 'down'); //키보드 아래 및 오른쪽 방향 스크롤 비활성화 fullpage_api.setKeyboardScrolling(false, 'down, right'); ``` --- ### setRecordHistory(불리언) [데모](http://codepen.io/alvarotrigo/pen/rVZWQb) URL의 각 해쉬 변경 기록을 기록할지 여부를 정의합니다. ```javascript fullpage_api.setRecordHistory(false); ``` --- ### setScrollingSpeed(1000분의 1초) [데모](http://codepen.io/alvarotrigo/pen/NqLbeY) 스크롤 속도를 1000분의 1초 단위로 정의합니다. ```javascript fullpage_api.setScrollingSpeed(700); ``` --- ### destroy(종류) [데모](http://codepen.io/alvarotrigo/pen/bdxBzv) 플러그인 사건(이벤트)을 없애며, 원하신다면 HTML 교정(마크업) 및 스타일도 제거할 수 있습니다. HTML 교정(마크업) 및 스타일 제거가 선택 가능합니다. AJAX로 컨텐츠를 불러오실 때 적합합니다. - `type`: (선택 가능한 매개변수) 비울 수 있거나 `all`이 가능합니다. `all`을 쓰면 fullpage.js가 쓰는 HTML 교정(마크업) 및 스타일이 제거됩니다. 이렇게 하면 모든 플러그인 수정 전 쓰였던 원래 HTML 교정(마크업) 및 스타일이 유지됩니다. ```javascript //fullPage.js가 만드는 모든 자바스크립트 사건(스크롤, URL의 해쉬 변경 등 이벤트)을 제거...) fullpage_api.destroy(); //귀하의 HTML 교정(마크업) 원본에 추가된 모든 자바스크립트 사건(이벤트)과 모든 fullPage.js 수정을 제거. fullpage_api.destroy('all'); ``` --- ### reBuild() DOM 구조가 새로운 창 크기나 컨텐츠에 맞도록 업데이트됩니다. 특히 `scrollOverflow:true`를 쓰실 때 AJAX 콜이나 웹사이트의 DOM 구조 안에서 외부 변화와 함께 쓰시면 적합합니다. ```javascript fullpage_api.reBuild(); ``` --- ### setResponsive(불리언) [데모](http://codepen.io/alvarotrigo/pen/WxOyLA) 페이지의 반응형 모드를 설정합니다. `true`로 설정되면 autoScrolling이 꺼지고 `responsiveWidth`나 `responsiveHeight` 옵션이 실행될 때와 완전히 동일한 결과가 나옵니다. ```javascript fullpage_api.setResponsive(true); ``` --- ### responsiveSlides.toSections() [fullpage.js 확장 프로그램](http://alvarotrigo.com/fullPage/extensions/). fullpage.js 버전이 2.8.5 이상이어야 합니다. 수평 슬라이드를 수직 구역으로 바꿉니다. ```javascript fullpage_api.responsiveSlides.toSections(); ``` --- ### responsiveSlides.toSlides() [fullpage.js 확장 프로그램](http://alvarotrigo.com/fullPage/extensions/). fullpage.js 버전이 2.8.5 이상이어야 합니다. (수직 구역으로 전환된) 슬라이드를 다시 수평 슬라이드로 되돌립니다. ```javascript fullpage_api.responsiveSlides.toSlides(); ``` ## 콜백 [데모](http://codepen.io/alvarotrigo/pen/XbPNQv) [여기](http://alvarotrigo.com/fullPage/examples/callbacks.html)서 어떻게 작동되는지 보실 수 있습니다. `onLeave` 등 일부 콜백에는 `Section` 또는 `Slide` 종류의 매개 변수가 들어갑니다. 이들 객체에는 다음 특성이 들어갑니다. - `anchor`: *(String)* 아이템의 앵커링크. - `index`: *(Number)* 아이템의 색인. - `item`: *(DOM element)* 아이템 요소. - `isFirst`: *(Boolean)* 아이템이 첫 번째 자식인지를 결정합니다. - `isLast`: *(Boolean)* 아이템이 마지막 자식인지를 결정합니다. ### afterLoad (`origin`, `destination`, `direction`) 구역을 불러오고 나서 스크롤이 끝나면 콜백이 실행됩니다. 매개 변수: - `origin`: *(Object)* 활성화된 구역 - `destination`: *(Object)* 목적지 구역. - `direction`: *(String)* 스크롤하는 방향에 따라 `up` 또는 `down` 예시: ```javascript new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterLoad: function(origin){ var loadedSection = this; //색인 사용 if(origin.index == 2){ alert("Section 3 ended loading"); } //앵커링크 사용 if(origin.anchor == 'secondSlide'){ alert("Section 2 ended loading"); } } }); ``` --- ### onLeave (`origin`, `destination`, `direction`) 사용자가 구역을 떠나고 새로운 구역으로 이동하는 와중에 콜백이 실행됩니다. `false`로 되돌리면 발동하기 전에 취소됩니다. 매개 변수: - `origin`: *(Object)* 출발 구역. - `destination`: *(Object)* 목적지 구역. - `direction`: *(String)* 스크롤하는 방향에 따라 `up` 또는 `down` 예시: ```javascript new fullpage('#fullpage', { onLeave: function(origin, destination, direction){ var leavingSection = this; //구역 2를 떠난 후 if(origin.index == 1 && direction =='down'){ alert("Going to section 3!"); } else if(origin.index == 1 && direction == 'up'){ alert("Going to section 1!"); } } }); ``` #### 스크롤을 실행하기 전 취소 `onLeave` 콜백에서 `false`로 되돌려서 스크롤을 취소하실 수 있습니다. ```javascript new fullpage('#fullpage', { onLeave: function(origin, destination, direction){ //목적지가 세번째 구역인 경우 스크롤되지 않음 if(destination.index == 2){ return false; } } }); ``` --- ### afterRender() 페이지 구조가 생성된 직후에 이 콜백이 실행됩니다. (이 플러그인이 DOM을 수정해서 결과 구조를 만들기 때문에) 다른 플러그인을 초기 설정하거나 문서(document)가 있어야 준비되는 모든 코드를 실행하고자 할 때 이 콜백을 쓰시면 됩니다. 더 자세한 정보를 원하신다면 [자주 묻는 질문(FAQ)](https://github.com/alvarotrigo/fullPage.js/wiki/FAQ---Frequently-Answered-Questions)을 참조해 주세요. 예시: ```javascript new fullpage('#fullpage', { afterRender: function(){ var pluginContainer = this; alert("The resulting DOM structure is ready"); } }); ``` --- ### afterResize(width, height) 브라우저 창의 크기가 바뀐 뒤에 이 콜백이 실행됩니다. 구역 크기가 바뀐 직후에 실행됩니다. 매개 변수: - `width`: *(Number)* 창의 너비. - `height`: *(Number)* 창의 폭. 예시: ```javascript new fullpage('#fullpage', { afterResize: function(){ var pluginContainer = this; alert("The sections have finished resizing"); } }); ``` --- ### afterResponsive(`isResponsive`) fullpage.js가 정상 모드에서 반응형 모드로 바뀌거나 반응형 모드에서 정상 모드로 바뀌고 나면 이 콜백이 실행됩니다. 매개 변수: - `isResponsive`: 반응형 모드(`true`)로 들어가거나 정상 모드(`false`)로 되돌아갈지를 결정하는 불리언 예시: ```javascript new fullpage('#fullpage', { afterResponsive: function(isResponsive){ alert("Is responsive: " + isResponsive); } }); ``` --- ### afterSlideLoad (`section`, `origin`, `destination`, `direction`) 구역의 슬라이드를 불러오고 나서 스크롤이 끝나면 콜백이 실행됩니다. 매개 변수: - `section`: *(Object)* 활성화된 수직 구역. - `origin`: *(Object)* 출발 수평 슬라이드. - `destination`: *(Object)* 도착 수평 슬라이드. - `direction`: *(String)* 스크롤 방향에 따라 `right` 또는 `left`. 예시: ```javascript new fullpage('#fullpage', { anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], afterSlideLoad: function( section, origin, destination, direction){ var loadedSlide = this; //두번째 구역의 첫번째 슬라이드 if(section.anchor == 'secondPage' && destination == 1){ alert("First slide loaded"); } //두번째 구역의 두번째 슬라이드 //(#secondSlide가 두번째 슬라이드의 앵커라고 가정할 때) if(section.index == 1 && destination.anchor == 'secondSlide'){ alert("Second slide loaded"); } } }); ``` --- ### onSlideLeave (`section`, `origin`, `destination`, `direction`) 사용자가 슬라이드를 떠나서 다른 슬라이드로 이동하는 와중에 콜백이 실행됩니다. `false`로 되돌리면 발동하기 전에 취소됩니다. 매개 변수: - `section`: *(Object)* 활성화된 수직 구역. - `origin`: *(Object)* 출발 수평 슬라이드. - `destination`: *(Object)* 도착 수평 슬라이드. - `direction`: *(String)* 스크롤 방향에 따라 `right` 또는 `left`. 예시: ```javascript new fullpage('#fullpage', { onSlideLeave: function( section, origin, destination, direction){ var leavingSlide = this; //두번째 구역의 첫번째 슬라이드를 떠나서 오른쪽으로 이동 if(section.index == 1 && origin.index == 0 && direction == 'right'){ alert("Leaving the fist slide!!"); } //두번째 구역의 세번째 슬라이드를 떠나서 왼쪽으로 이동 if(section.index == 1 && origin.index == 2 && direction == 'left'){ alert("Going to slide 2! "); } } }); ``` #### 실행되기 전에 이동 취소 `onSlideLeave` 콜백에서 `false`로 되돌려서 취소하실 수 있습니다. [`onLeave` 취소와 동일합니다](https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%9D%84-%EC%8B%A4%ED%96%89%ED%95%98%EA%B8%B0-%EC%A0%84-%EC%B7%A8%EC%86%8C). # 문제 알리기 1. 문의하시기 이전에 먼저 github 검색으로 찾아보시기 바랍니다. 2. fullpage.js 최신 버전을 쓰시기 바랍니다. 이전 버전은 지원해 드리지 않습니다. 3. [Github 문제 포럼](https://github.com/alvarotrigo/fullPage.js/issues)을 활용해 보세요. 4. **문제만 따로 떼어내어 재현해야 합니다.** 가능하다면 [jsfiddle](https://jsfiddle.net/1kyuL4em/2/)이나 [codepen](http://codepen.io/alvarotrigo/pen/NxyPPp)을 활용하시기 바랍니다. # fullpage.js에 기여하기 [fullpage.js에 기여하기](https://github.com/alvarotrigo/fullPage.js/wiki/Contributing-to-fullpage.js)를 방문해 주세요. # 수정 일지 최근 수정 사항 목록을 보시려면 [수정 내역](https://github.com/alvarotrigo/fullPage.js/releases)을 참조해 주세요. # 구축 도전 fullpage.js 배포 파일을 구축하고 싶으신가요? [구축 도전](https://github.com/alvarotrigo/fullPage.js/wiki/Build-tasks)을 방문해 주세요. # 재료가 되는 도구 - [워드프레스 테마](https://alvarotrigo.com/fullPage/utils/wordpress.html) - [Vue.js wrapper component](https://github.com/alvarotrigo/vue-fullpage.js) - [CSS Easing Animation Tool - Matthew Lein](http://matthewlein.com/ceaser/) (`easingcss3` 값을 정의하는 데 유용) - [fullPage.js jsDelivr CDN](https://www.jsdelivr.com/package/npm/fullpage.js) - [fullPage.js October CMS 플러그인](http://octobercms.com/plugin/freestream-parallax) - [fullPage.js 워드프레스 플러그인](https://wordpress.org/plugins/wp-fullpage/) - [fullPage.js Angular2 directive](https://github.com/meiblorn/ng2-fullpage) - [fullPage.js angular directive](https://github.com/hellsan631/angular-fullpage.js) - [fullPage.js ember-cli 애드온](https://www.npmjs.com/package/ember-cli-fullpagejs) - [fullPage.js Rails Ruby Gem](https://rubygems.org/gems/fullpagejs-rails) - [각진 fullPage.js - Angular.js v1.x 맞춤형](https://github.com/mmautomatizacion/angular-fullpage.js) - [fullPage.js를 워드프레스와 통합하기 (튜토리얼)](http://premium.wpmudev.org/blog/build-apple-inspired-full-page-scrolling-pages-for-your-wordpress-site/) ## 누가 fullPage.js를 쓰나요? 귀하의 페이지가 여기에 나오길 원하시다면 저에게 URL을 보내주세요. [![Google](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/google-4.png)](http://www.yourprimer.com/) [![Coca-cola](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/cocacola-4.png)](https://www.coca-colacompany.com/annual-review/2017/index.html) ![eBay](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/ebay-4.png) [![BBC](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/bbc-4.png)](http://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02) ![Sony](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/sony-4.png) ![Vodafone](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/vodafone-5.png) ![British Airways](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/british-airways-5.png) ![McDonalds](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/mcdonalds-6.png) ![EA](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/ea-6.png) [![Vogue](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/vogue-6.png)](http://www.vogue.fr/chaumet-histoires-de-liens) ![Mi](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/mi-6.png) [![Mercedes](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/mercedes-5.png)](https://www.x-class.com.au/) [![sym](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/sym-5.png)](http://www.sanyang.com.tw/service/Conception/) ![Bugatti](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/bugatti-5.png) [![eDarling](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/edarling-5.png)](https://www.edarling.de/) ![Ubisoft](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/ubisoft-5.png) - https://www.coca-colacompany.com/annual-review/2017/index.html - http://www.bbc.co.uk/news/resources/idt-d88680d1-26f2-4863-be95-83298fd01e02 - https://www.x-class.com.au - http://www.yourprimer.com/ - http://www.vogue.fr/chaumet-histoires-de-liens - http://burntmovie.com/ - http://www.newjumoconcept.com/ - http://www.shootinggalleryasia.com/ - http://medoff.ua/en/ - http://promo.prestigio.com/grace1/ - http://www.commoditiesdemystified.info/en/ - http://torchbrowser.com/ - http://thekorner.fr/ - https://www.edarling.de/ - http://urban-walks.com/ - http://lingualeo.com/ - http://charlotteaimes.com/ - http://collection.madeofsundays.com - http://www.boxreload.com/ - http://educationaboveall.org/ - http://camfindapp.com/ - http://rockercreative.com/ - http://usescribe.com/ - http://lucilecazanave.com/ - http://boxx.hk/ - http://bearonunicycle.com/ - http://rawmilk.dk/en/ - http://www.famavolat.com/ - http://www.sanyang.com.tw/service/Conception/ - http://www.batzaya.net/ - http://medissix.com/ - http://trasmissione-energia.terna.it/ - http://www.thefoodmovie.com/ - http://www.villareginateodolinda.it - http://www.kesstrio.com - http://ded-morozz.kiev.ua/ - http://unabridgedsoftware.com/ - http://atlanticcorp.us/ - http://moysport.ru/ - http://themify.me/demo/#theme=fullpane - http://dancingroad.com - http://www.camanihome.com/ - https://life2film.com/en/ [여기](http://libscore.com/#$.fn.fullpage)서 나머지 사용자 목록을 보실 수 있습니다. ## 기부 두 팔 벌려 기부를 환영합니다 :) [Patreon page](https://www.patreon.com/fullpagejs) [![기부](https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=BEK5JQCQMED4J&lc=GB&item_name=fullPage%2ejs¤cy_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted) ## Sponsors Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://alvarotrigo.com/#contact)] | [[Become a patreon](https://www.patreon.com/fullpagejs)] [![Stackpath](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/stackpath3.png)](https://www.stackpath.com/) [![Browserstack](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/browserstack3.png)](http://www.browserstack.com/) [![HostPresto](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/hostpresto3.png)](https://hostpresto.com/?utm_source=alvaro) [![CodePen](http://wallpapers-for-ipad.com/fullpage/imgs3/logos/codepen3.png)](https://codepen.com) ### People