PIGNOSE-ParallaxSlider
jQuery slider plugin that is supported "Parallax" effect.
- Licenced under MIT
- This plugin supports most browsers including Internet Explorer 8+, Chrome, Firefox, Safari and Opera.
- And also tested on Safari for MAC Platform, It is definitely safe on the most modern Browsers!
Getting Started
Installation
This plugin needs
jQuery
library.
- Check the jQuery library at here
Recommend version 1.11.x higher
- Also you need jQuery easing library at here for animation.
- And insert this snippets
- import pignose-parallaxslider files(css, js)
If you use Bower
- open terminal and type those command line.
bower install pg-parallaxslider
- move
dist/js/pignose.parallaxslider.min.js
anddist/css/pignose.parallaxslider.min.css
to your project folder.
If you use npm
- open a command line and type this
npm install pg-parallaxslider
Usage
Refer to below exhibit.
HTML
<!-- Slide Image Area (1000 x 424) --> <!-- Slide Description Image Area (316 x 328) -->
Javascript
;
Options
name | value | default | description |
---|---|---|---|
speed | number |
1200 | the millisecond time for speed of the slide animation. |
interval | number |
3000 | the millisecond time for interval of the slide animation. |
direction | string |
right | the direction of slide animation. |
diffTime | number |
300 | the millisecond time that you want to put between main view and sub view as a parallax. |
controlAnim | boolean |
true | if you set this property to false, this plugin will ignore the status of animation queue. |
pagination | boolean |
true | if you set this property to true, pagination controller will show. |
auto | boolean |
true | if you set this property to true, this slider will start automatically. |
isLocal | boolean |
true | this property set that each of controllers(play, stop, prev and next) is belong local of those container or not. |
play | jQuery object |
null | the jQuery object of play button. |
pause | jQuery object |
null | the jQuery object of pause button. |
next | jQuery object |
null | the jQuery object of next button. |
prev | jQuery object |
null | the jQuery object of prev button. |
afterMove | callback |
null | this callback will be called after slider moved. |
Issues
We are wating for your requests.
Please report to us, If you find some problems.
Thank you!