Angular Warp Scroll
Simple directive for scrolling into the website and add dots navigation automatically. Currently under development.
Requirements
- AngularJS 1.5+
- jQuery 2.2+ (still)
Installation
You have two ways to get this module running. Choose this one you feel most comfortable with.
Installation without Package Manager
1) Download
Download angular-scroll-watch
from https://github.com/nextlevelshit/angular-warp-scroll/archive/master.zip and unzip.
2) Solve dependencies
Include jQuery
and AngularJS
from CDN or download the main script files to your folder.
3) ADd files to your website
Please do not forget to specify the folder to the downloaded files. Replace [PATH-TO-YOUR-DOWNLOAD-FOLDER]
with your path to the downloaded files.
Installation with npm
1) Check if you got node.js already running
node -v
If you get no result please download and install node.js
from https://docs.npmjs.com/getting-started/installing-node
angular-warp-scroll
2) Install npm install angular-warp-scroll
jquery
and angular
3) Install dependencies npm install jquerynpm install angular
3) Add all necessary files to your website
Put this lines into <head>
of your website.
It is also recommended to use the delivered styles, but they are not necessary.
4) Initialize the script
Specify the angular app in the <html>
tag.
Load angular-warp-scroll
controller in the <body>
tag.
Documentation
After you have followed all steps above, you are now free to use this module. Take a look at the example.html to see all features.
Features
Dots navigation
The navigation is rendered automatically from the amount of slides, which are declared by class="slide"
.
Adding the attribute data-title
specifies the displayed navigation point.
Adding slides
Add element with class slide
to a wrapper.
Slide #1 Slide #2