Need help with angular-fullpage?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

alvarotrigo
129 Stars 37 Forks GNU General Public License v3.0 118 Commits 15 Opened issues

Description

Official Angular wrapper for fullPage.js https://alvarotrigo.com/angular-fullpage/

Services available

!
?

Need anything else?

Contributors list

# 37
HTML
slide
jQuery
swipe
49 commits
# 731
GitHub
Laravel
rust-la...
wechat-...
4 commits
# 161,920
Objecti...
Shell
iOS
walkthr...
1 commit

Angular fullpage

preview

Official Angular wrapper for the fullpage.js library.

angular-fullpage version

Table of Contents

Installation

npm install @fullpage/angular-fullpage

This will install the Angular wrapper as well as fullpage.js library.

License

Non open source license

If you want to use angular-fullpage to develop non open sourced sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Which means, you won't have to change your whole application source code to an open source license. Purchase a Fullpage Commercial License.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use fullPage under the terms of the GPLv3.

The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification)

Read more about fullPage's license.

Usage

// app.module.ts
import { AngularFullpageModule } from '@fullpage/angular-fullpage';

@NgModule({ imports: [ BrowserModule, AppRoutingModule, AngularFullpageModule //*** added ] })

You should import the fullpage.js stylesheet on your

style.scss
or
component.scss
:
/* styles.scss or app.component.scss */
@import url(~fullpage.js/dist/fullpage.min.css);
/* standard css */
@import '~fullpage.js/dist/fullpage.min.css';

Then use the directive on your component:

// app.component.ts
export class AppComponent {
  config: any;
  fullpage_api: any;

constructor() {

// for more details on config options please visit fullPage.js docs
this.config = {

  // fullpage options
  licenseKey: 'YOUR LICENSE KEY HERE',
  anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
  menu: '#menu',

  // fullpage callbacks
  afterResize: () => {
    console.log("After resize");
  },
  afterLoad: (origin, destination, direction) => {
    console.log(origin.index);
  }
};

}

getRef(fullPageRef) { this.fullpage_api = fullPageRef; }

}

Example of HTML:

Some section1
Some section2
Slide 2.1
Slide 2.2
Slide 2.3
Some section4

Use extensions

In order to make use of fullpage.js extension you'll have to add the extension file to

angular.json
.

For example, if we want to use the

scrollHorizontally
extension we will have to add the path to our
fullpage.scrollHorizontally.min.js
file on the
scripts
array:
"assets": [
  "src/favicon.ico",
  "src/assets"
],

"styles": [ "src/styles.css" ],

"scripts": [ "src/assets/fullpage.scrollHorizontally.min.js" ],

Then pass the required options to fullPage.js. In this case

scrollHorizontally:true
.

Use of scrollOverflow

Same procedure than the use of extensions detailed above.

"assets": [
  "src/favicon.ico",
  "src/assets"
],

"styles": [ "src/styles.css" ],

"scripts": [ "node_modules/fullpage.js/vendors/scrolloverflow.min.js" ],

Dynamic Changes

If you want to update fullPage.js with new changes in the DOM call the

build()
method after making those changes.

An example can be seen on the dynamic-changes example:

this.renderer.appendChild(this.fp_directive.nativeElement, section);
this.fullpage_api.build(); // 

An example for *ngFor can be seen on the dynamic-changes-with-ngFor example:

Section {{section}}

Examples

You can check some examples on the

demo
folder.

Contributing

Found an issue? Have an idea? Check out the Contributing guide and open a PR

Resources

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.