https://github.com/yurayarosh/fullpage-pagination

Js plugin for making fullpage pagination
https://github.com/yurayarosh/fullpage-pagination

Last synced: about 1 month ago
JSON representation

Js plugin for making fullpage pagination

• Host: GitHub
• URL: https://github.com/yurayarosh/fullpage-pagination
• Owner: yurayarosh
• Created: 2019-07-06T13:05:52.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-12-11T09:17:03.000Z (about 5 years ago)
• Last Synced: 2024-10-15T08:13:12.850Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 248 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# fullpage-pagination

### Example

  * [Basic](https://codesandbox.io/s/fullpage-pagination-example-srixb)

  * [CustomTransitions](https://codesandbox.io/s/fullpage-pagination-custom-transition-mrrui)

### Install

```html

npm i fullpage-pagination

```

```html



  


    
section-1

    
section-2

    
section-3

    
section-4

    
section-5

  
   



button anchor to section 3

link anchor to section 3 from another page

```

```js

import { Fullpage, addTouchEvents } from 'fullpage-pagination';

addTouchEvents();

const page = document.querySelector('.js-fullpage');

const options = {

  // some options

};

const fullpage = new Fullpage(page, options);

fullpage.init();

```

### Options

Standart options

```js

{

  transition: 500, // slide transition in miliseconds

  easing: 'ease', // slide transition easing

  navigation: false, // html nav container

  renderNavButton: false, // (i) => { // return button html }

  prevButton: false, // prev button html element

  nextButton: false, // next button html element

  fadeIn: false, // fade effect

  fadeInDuration: 500, // fade effect duration

  customTransition: false, // no effects, just toggle active classnames

  touchevents: false, // pagination on touchevents

  loop: false, // loop option

  toggleClassesFirst: false // if true - toggle sections classes before animation

}

```

### Events

```js

fullpage.afterLoad = () => {

  // some callback

};

fullpage.onExit = (section, resolve) => {

  // some callback

};

fullpage.onEnter = (section, resolve) => {

  // some callback

};

fullpage.onComplete = () => {

  // some callback

};

```